29 May 2012

Customer KnockoutJS Validation

This article is the second on KnockoutJS series I am writing.
The first article was introductory: Customer KnockoutJS and MVC demo using JSON

Now I am going to focus on KnockoutJS and validation. I am going to use a KnockoutJS Plugin for model and property validation that is named Knockout Validation. You can download it from here.

The Asp.Net MVC Controller have the actions to Get and Add a customer. This example has a new customer property: the country.
This property allows to add an input type select to KnockoutJS and validation.
namespace KnockoutDemo.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            ViewBag.Message = "";

            return View();

        public JsonResult Get(int customerID)
            // Get the customer ...
            Customer customer = new Customer {CustomerID = customerID, 
                                              FirstName = "John", 
                                              LastName = "Doe", 
                                              IsMale = true, 
                                              CountryID = 1 };
            return Json(customer);

        public JsonResult Add(Customer customer)
            // Save the customer ...

            // return status message 
            var message = string.Format("Customer: {0} {1} Added. IsMale: {2} Age:{3}  CountryID: {4} ",
                                        customer.FirstName, customer.LastName, customer.IsMale.ToString(), 
                                        customer.Age.ToString(), customer.CountryID.ToString());
            return Json(message);


The Asp.Net MVC model is the customer with the new property:
 namespace KnockoutDemo.Models
    public class Customer

        public int CustomerID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public bool IsMale { get; set; }
        public int Age { get; set; }
        public int CountryID { get; set; }

The Asp.Net MVC Layout includes the new knockout validation plugin:
<!DOCTYPE html>
    <meta charset="utf-8" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.validation.js")" type="text/javascript"></script>
    <div class="page">
            <div id="title">
                <h1>Knockout Demo</h1>
        <section id="main">
And the Asp.Net MVC view has the KnockoutJS and validation specifics:
    ViewBag.Title = "Add Customer";


Customer Number:

First Name: Last Name: Age: Male Country:

The KnockoutJS now has a observableArray of countries in the VewModel, that is bind to the country select.
Note the data-bind oprtions of the select:
- options: controls what options should appear in a drop-down lis
- optionsValue: The name of the ViewModel property to bind to the option value
- optionsText: The name of the ViewModel property to bind to the option text
- value: The name of the ViewModel property to bind to the selected value
- optionsCaption: The option that is used to make the user select a value on the select list

There is also the validation plugin specifics in the VewModel declaration:
- The extend is used to extend the observables with the validation rules. (you can read about all of them here)
In the example I am using the required  (required: true) and number (number: true) validation rules.
- validatedObservable in the view model declaration
- isValid() - Before saving the data validate that the model is valid
- validation.init - Used to configure the validation engine

In the example the invalid inputs are painted in red, that is where the css class is used by the validation.

No comments: