Welcome to weblogs.com.pk Sign in | Join | Help

Data Validation–Knockout

Data Validation Series

In the previous posts we learned about how we can do client side validation using jQuery.Validation against a server side .NET model having System.ComponentModel.DataAnnotations attributes. There are two issues; first lot of spaghetti html code is generated “automagically” that web developers don't like; they want to have more control over the html or better they want to hand craft the html and Javascript so their tools give them complete visualization and intellisense so they can further tweak it as per their likings; and second the validation is at UI level; the html input controls are being validated and if you want a client side “model” (in Javascript) that you want to use in some client side frameworks (MVC/MVVM etc) and want to use the validated model against some Web Apis; you need “something else”; “something more” and “something modern” (Javascripty)

For this post; I am going to use Knockout and will try to implement client validation rules on the Knockout view model object; here’s our model that we will be working with.

First we need a Web Api Controller; and as an example we are just considering “Create” case from CRUD and I am not going to write any data layer code for sake of simplicity.


  • I have used CameCasePropertyNamesContractResolver for Newtonsoft Json Serialization; so we can have our “view model” in client side Javascript code in camel case (JavaScript naming) and the server side class can continue to be Pascal Case (C# naming)
  • I am returning BadRequest along with ModelState object when model state is invalid; and we can handle this “exception” / error at client side to display the model validation errors from the server

We will be using Knockout.Validation NUGET package; a validation plugin for Knockout; installing its NUGET package will also install knockoutjs package that you should update afterword to the latest version. For the visualization, we are going to use Knockout Template Binding so along with input control the errors can be displayed associated to particular control. Further a variety of validation rules are being defined; though similar to our server side validation rules but varied enough to cover good ground to feel what the Knockout Validation plugin has to offer. To display the server side model state errors; I have added an array and populating it accordingly


Once we have the model errors in the array; we can display them through Knockout. For the rest implementation details I am attaching the complete html and javascript code below

  • captcha and password verification rules show how you can use Javascript based validation logic
  • First name if not entered will only be checked at server side so we can confirm to see model state errors work is working
  • Note the age is marked required using the HTML5 and not in the Knockout.Validation; not all browsers will support it but it will get caught at server

The good thing about Knockout.Validation is that all the “validation logic” is “defined” by hand in the Javascript; so if web development team has web designer and javascript developers; they can work seamlessly together with good separation of concern. However; this is duplicated effort; we now have to maintain the validation logic not only at the backend but also the frontend; but then this is something that we have to do anyways. If we dont want to duplicate this effort; given the Knockout.Validation plugin is not polluting the HTML; we can either have HtmlHelper style helper in MVC or Web Form Controls that can generate the required Javascript code extending the Knockout Model View adding validation rules; a topic of separate post perhaps. Another approach can be a template based code generation that generates the HTML + Knockout Javascript using the server side model that web designers and developers can further tweak or enhance as per their likings.

The code is available at https://github.com/khurram-aziz/WebApplication46

Published Saturday, November 11, 2017 1:03 PM by khurram
Filed under: ,


No Comments

New Comments to this post are disabled