Automatically handling MVC Server Side Validation (using Fluent Validation) in a KnockoutJS client

831 views
Skip to first unread message

DuCKa!!

unread,
Oct 30, 2011, 11:25:47 PM10/30/11
to KnockoutJS
Does anyone know if there is a way for me to retrieve a list of
elements that are bound to a particular observable by a particular
binding (i.e. value or selectedOptions)? I can't seem to find any
function on the Ko api to help me with this, so does anyone know a
nice way of adding this functionality to knockout?

I'm currently experimenting with an automated way to map server side
validation (using MVC FluentValidation) to client side view elements.
At this stage, I'm thinking the process should go something like this:

1) User posts the KO model to the server for processing using AJAX.
2) Server validates the model using Fluent Validation, validation
messages are collected, and sent back to the client as a JSON object.
3) The validation messages are returned to the client as key value
pairs, where the Key is a path to the property that was found to be
invalid. So, if we have an invalid model like this:

// View Model after it's been run through ko.toJS() so it can be
posted to the server.
{
ChildrenObjs:
[
{ PropertyA: null; }, // Both array elements are invalid
because of a null PropertyA
{ PropertyA: null; }
]
}

Then the response from the server would be something like this:

{
Messages:
[
{ Key: "ChildObjs[0].PropertyA", Value: "PropertyA cannot be
null" },
{ Key: "ChildObjs[1].PropertyA", Value: "PropertyA cannot be
null" }
]
}


What I would like to do upon receiving these messages back from the
server is take the "Key" from the message, and use this to locate
related observable on the client side viewmodel. I would then like to
find out which elements are bound to this observable so I can
programmatically flag them as invalid using jQuery Validation.


Having said all that, I'm aware that this procedure is making the
assumption that the client side view model is structurally equivalent
to the object graph constructed on the server side. I'm also aware
that the structure of the client side view model must not be modified
while the posted data is being processed on the server side.

Any feedback would be appreciated!

DuCKa!!

unread,
Nov 1, 2011, 9:58:13 PM11/1/11
to KnockoutJS
Well, I've been able to create a bit of bolt on functionality for
Knockout that allows me to find out the elements bound to each
observable, and visa versa. With this functionality, I think I'll be
able to get automated server side validation working with KnockoutJS,
FluentValidation, MVC, and jQuery Validation. Here's what the process
looks like so far:

1) Submit the view model to the MVC Website as JSON.
2) FluentValidation on the server validates the model, and generates a
number of error messages in a key value format. These messages are
converted to JSON and are sent back to the client. The format of the
JSON object should look something like this:

[{ Key: 'ValueA', Message: "Field cannot be null" },
{ Key: 'NavPtyA.NavPtyB[0].ValueB', Message: "Field cannot be null" }]

3) Some client side scripting then processes each one of the
messages. For each message the Key of the message is used as the path
to traverse the Knockout View Model. Once the view model has been
traversed, we should have arrived at the observable that contains the
invalid data. At this stage we find out what html elements are mapped
to this observable, and then we flag them as invalid using the
showErrors() method in jQuery Validation.

When I get the chance I'll post a demo of this functionality on the
web.

Lucas
Reply all
Reply to author
Forward
0 new messages