The JsonResult type has a property called Data of type Object that you can parse if you have used a concrete object as your data for example:

Model

public class Person
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Age { get; set; }
  }

Controller Action

public JsonResult Index()
{
  //Logic ....
  var person = new Person
                      {
                          Id = 1,
                          Name = "Nadeem",
                          Age = "24"
                      };
  return Json(person);
}

Unit Test

[Test]
public void Testing()
{
  var controller = new HomeController();

  var result = controller.Test();
  var data = result.Data as Person; //you can now access the Person properties

  //Assert
}

This is all good but we get stuck if we want to pass an anonymous object to our JsonResult there is no way to cast to something to access an anonymous object properties

the solution is i made two custom helper methods that we can use to get values from a JsonResult.Data object
ill follow after with an example of using it

The custom helper:

public static class Helper
{
  public static object GetValue(this JsonResult result,string propertyName)
  {
    IDictionary<string, object> wrapper = new System.Web.Routing.RouteValueDictionary(result.Data);
    return wrapper[propertyName];
  }
  public static T GetValue<T>(this JsonResult result, string propertyName)
  {
    return (T) GetValue(result, propertyName);
  }
}

Example:

Controller Action

public JsonResult Index()
{
  //Logic ....
  return Json(new {number = 1});
}

Unit Test

[Test]
public void Testing()
{
  var controller = new HomeController();

  var result = controller.Index();

  Assert.AreEqual(1, result.GetValue<int>("number"));
}

This is how to test a JsonResult using  anonymous types

For the fun of it we can make a helper that returns a dynamic type (but its not as efficient as the top solution)

The custom helper:

public static dynamic ToDynamic(this JsonResult jsonResult)
{
  var expandoObject = new ExpandoObject();
  var expandoCollection = (ICollection<KeyValuePair<string, object>>)expandoObject;
  var dataWrapper = new RouteValueDictionary(jsonResult.Data);
  foreach (var kvp in dataWrapper)
  {
    expandoCollection.Add(kvp);
  }
  dynamic eoDynamic = expandoObject;
  return eoDynamic;
}

Unit Test

[Test]
public void Testing()
{
  var controller = new HomeController();

  var result = controller.Index();

  Assert.AreEqual(1, result.ToDynamic().number);
}

First of lets start with a simple example and how to write a simple view model and bind it to the page

First name: <input type="text" data-bind="value: firstName" />

Last name: <input type="text" data-bind="value: lastName" />

<h2>Hello, <span data-bind="text: fullName "/>!</h2>

And the Javascript file

var User = function() {
    this.firstName = ko.observable("Nadeem");
    this.lastName = ko.observable("Khedr");
    this.fullName = ko.computed(function () {
      return this.firstName() + " " + this.lastName();
    },this);
};
ko.applyBindings(new User());

This will bind our Javascript view model to the whole html document and every variable in the databind attributes wil refer to a property of this one view model

Bind a view model to a partial part of the page

In the previous example we passed our view model to ko.applyBindings, this method take another parameter, which is the DOM element that we want to attach our view model to, In the next example we will attach two different & not related view models to different parts of our page

<div id="section1">
  First name: <input type="text" data-bind="value: firstName" />

  Last name: <input type="text" data-bind="value: lastName" />

  <h2>Hello, <span data-bind="text: fullName "/>!</h2>
</div>
<div id="section2">
First name: <input type="text" data-bind="value: firstName" />

Last name: <input type="text" data-bind="value: lastName" />

<h2>Hello, <span data-bind="text: fullName "/>!</h2>
</div>

And the Javascript for this

var User = function(firstName,lastName) {
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.fullName = ko.computed(function () {
      return this.firstName() + " " + this.lastName();
    },this);
};
ko.applyBindings(new User("Nadeem","Khedr"), $("#section1").get(0));
ko.applyBindings(new User("Phil","Joe"), $("#section2").get(0));

Bind a view model to the whole page and bind other view models to sections inside the page

In a more advanced scenario what we could want is to bind a view model to the whole page & sort of mini view models to different reusable components inside the page

In the previous example we cant define two html sections inside each other with different view models, they must be distinct, in another word we can’t define a master view model for all the page and a small view model for a part of that page because they will collide

A scenario that we would want exactly that

We want a master view model to our page (Layout)
We want a reusable view model for a sidebar that we could use in multiple pages (Partial View)

To achieve that what we will do is go to the parent of the sidebar and tell it stop binding the page view model to your descendant elements

so what will happen exactly is we will define a view model to the whole page without specifying a DOM element to attach it to, and another view model (maybe in another file) for only the side bar and bind it to it

How to do that without getting errors that the properties in the sidebar doesn’t exists in the application view model

We will put a custom attribute on the sidebar container, the attribute will look like this

<div id="sidebarCont" data-bind="allowBinding: false">

what this will do is tell the current view model attached to the document to stop binding itself to the descendant elements for the sidebarCont

the allowBinding is a custom bindingHandler that we defined and looks like this

ko.bindingHandlers.allowBindings = {
      init: function(elem, valueAccessor) {
      var shouldAllowBindings;
      shouldAllowBindings = ko.utils.unwrapObservable(valueAccessor());
      return {
        controlsDescendantBindings: !shouldAllowBindings
      };
    }
  };

the above code is self explanatory all the magic happens with the controlsDescendantBindings
if you want to read more about bindingHandlers you can check this link

1. How the jQuery validate plugin works internally
2. Understand the Html generated by the unobtrusive validation in Asp.net MVC
3. How the unobtrusive jQuery validate plugin works internally in Asp.net MVC

What we will be talking about in this article

• The parse method
  • parseElement section
    • skipAttach parameter explanation
    • parseElement function explanation
  • validateInfo section
    • validateInfo function explanation
    • The return object explanation
• Adapters

The parse method

we will explain the cycle of whats happening in the unobtrusive validation at the document load and will understand what is the role of every component

if we look at the end of the jquery.validate.unobtrusive.js we will find

$(function () {
  $jQval.unobtrusive.parse(document);
});

so we called the parse() method and pass it document

so whats the parse method exactly

{
parse: function (selector) {
///
<summary>
/// Parses all the HTML elements in the specified selector. It looks for input elements decorated
/// with the [data-val=true] attribute value and enables validation according to the data-val-*
/// attribute values.
/// </summary>
///Any valid jQuery selector.

$(selector).find(":input[data-val=true]").each(function () {
  $jQval.unobtrusive.parseElement(this, true);
});

var $forms = $(selector)
    .parents("form")
    .andSelf()
      .add($(selector).find("form"))
      .filter("form");

$forms.each(function () {
  var info = validationInfo(this);
  if (info) {
    info.attachValidation();
  }
});
}
}

There is two sections in the parse method

1- parseElement section

parseElement(element, skipAttach)

$(selector).find(":input[data-val=true]").each(function () {
  $jQval.unobtrusive.parseElement(this, true);
});

so the first thing that happens we iterate over all the elements that have a data-val=true inside the selector that we passed (its document in our case)

then call parseElement() and pass it the element we want to validate and true for skipAttach

• skipAttach parameter explanation

  a question could come up why we passed true to skipAttach not false

  skipAttach is a flag for calling validate() on the form

  If we passed false it will translate the rules on the element that we have passed then immediately call validate on the rules array and pass along other options used by the unobtrusive validation. (if there is still other element to be parsed they wont)

  We don’t want that. We first want to translate all the rules on every element in the form then after all the rules are translated we will call validate() which is basically the second part of the parse method

  So what other scenarios we would pass true to skipAttach ?

  If we want to add dynamic element to an already validated form we will pass true to skip validating the form again cause to wont make any effect (we will talk about dynamic validating element in the next article)

• parseElement function explanation

  The parseElement() does mainly two things

  1. On the first call on an element in a form (No element was called before it in the same form)
     it will construct an object of options that will be passed to the validate() method, the options are used by the jquery.unobtrusive like a custom errorPlacement function, custom errorClass and an empty rules array (Note: what is responsible of doing all that is a private method called validationInfo(form) that is called within parseElement and when its called more than 1 time it will just return the same object so we can add, modify or call data/functions in it)
  2. For every element when we call parseElement it will understand the rules that are written on this element (the data-*) using the adapters (Will explain later how the adapters works)and then translate and add them to the rules array that was constructed in the first call
     (Note: every call to parseElement its result will be saved on the form itself using $.data(“unobtrusiveValidation“) that’s how the separate calls sync in the same data source)

2- validateInfo section

var $forms = $(selector)
  .parents("form")
  .andSelf()
  .add($(selector).find("form"))
  .filter("form");

$forms.each(function () {
  var info = validationInfo(this);
  if (info) {
    info.attachValidation();
  }
});

• validateInfo function explanation

  we already said calling validateInfo() will construct an object of options for the validate() method, the options are used by the jquery.unobtrusive like a custom errorPlacement function, custom errorClass and an empty rules array

  here we also called validationInfo() for every form in the page
  basically at this point calling validationInfo() we will only get the object stored on the form that was already populated in the first phase so we are using it as a getter

  then we are calling attachValidation() which is basically calling the validate() method passing it all the options populated by the validationInfo()

  data_validation = "unobtrusiveValidation";
  
  function validationInfo(form) {
    var $form = $(form),
         result = $form.data(data_validation),
         onResetProxy = $.proxy(onReset, form);
  
    if (!result) {
      result = {
        options: {  // options structure passed to jQuery Validate's validate() method
          errorClass: "input-validation-error",
          errorElement: "span",
          errorPlacement: $.proxy(onError, form),
          invalidHandler: $.proxy(onErrors, form),
          messages: {},
          rules: {},
          success: $.proxy(onSuccess, form)
        },
        attachValidation: function () {
          $form
            .unbind("reset." + data_validation, onResetProxy)
            .bind("reset." + data_validation, onResetProxy)
            .validate(this.options);
          },
        validate: function () {  // a validation function that is called by unobtrusive Ajax
          $form.validate();
          return $form.valid();
        }
      };
      $form.data(data_validation, result);
    }
    return result;
  }
  

  first we are checking if we already called this function on the form before by using $form.data(“unobtrusiveValidation“) if we did then do nothing and return the result

• The return object explanation

  If its the first time we call validationInfo() then we construct a result object and will save it on the form using $.data() method this object will contain 3 parts:

  • An object which is the basically all the options that we will pass to the validate() method with an empty rules & messages arrays that will be constructed later
  • attachValidation() method will bind a custom event to the form itself “reset.unobtrusiveValidation” and after call validate on the method with all the options , this method will be called when the rules & messages arrays are completed  ( triggering the custom “reset” event will call onReset() method which will basically resets everything )

    function onReset(event) {  // 'this' is the form element
      var $form = $(this);
    
      $form.data("validator").resetForm();
      $form.find(".control-group").removeClass("error");
      $form.find(".validation-summary-errors")
        .addClass("validation-summary-valid")
        .removeClass("validation-summary-errors");
      $form.find(".field-validation-error")
        .addClass("field-validation-valid")
        .removeClass("field-validation-error")
        .removeData("unobtrusiveContainer")
          .find(">*")  // If we were using valmsg-replace, get the underlying error
          .removeData("unobtrusiveContainer");
    }
    

    so if we want to trigger the reset event to reset the form

    $('form').trigger('reset.unobtrusiveValidation')
    

  • a custom validate() method that will be called from unobtrusive ajax

Adapters

I intentionally left the adapters section out when i talked about the parseElement() method because its complicated enough to be in a sub-section

We looked at how Html is generated using unobtrusive validation and how to add custom validation attribute in normal jquery.validate what links between the two is the Adapters

So What is the adapter’s responsibility ?

it is responsible for translating the Html data-* to a format that can be understood by the normal jquery.validate

If a user want to add a custom validation method using the unobtrusive validation he must also provide an adapter for it

the adapters collection resides in $.validator.unobtrusive.adapters

• the adapters collection consist of all the default adapters defined by default in jquery.unobstrusive and the ones that the user has defined
• It also contains 4 methods for adding custom adapters that we will take a look at later

so lets look at the most generic method which is

jQuery.validator.unobtrusive.adapters.add(adapterName, [params], fn)

you can consider this method the $.ajax method and the other three are helper methods that uses it

so lets explain the parameters

• adapterName: is the adapter name as the name implies , and it matches the ruleName in the Html element (data-val-ruleName)
• [params]: an optional parameter array that the validation method would use to complete validation
• fn: Is called to map the Html data-*to rules and messages used by the validate() method and it has a parameter option passed to it which is an object containing the following properties:
  • element: the Html element being validated
  • form: the form element
  • message: the error message for this rule extracted from data-* attribute on the element
  • params: parameters that are used for the validation and its an array extracted from the data-* attributes on the Html element (data-val-ruleName-param1)
  • rules: The jquery rules array for this element , your expected to add to this array the rule(s) that this adapter is used for
    you will pass key/value pairs , the key is the validation rule name , the value is the parameters used for this rule (check this section in that article for adding custom rules to jquery.validate)
  • messages: The jquery messages array for this element, same as the rules object you are expected to fill it and its used as the messages object for this Html element in the validate method

  Note: There is no return result from the method. Whats happening manipulating the rules & messages arrays will directly be saved on the form itself using $.data(“unobtrusiveValidation“) you can check the parseElement method for the details of how the parameter where passed to the adapter function

Example:

Html

<input id="val" type="text" name="val" data-val="true" data-val-between="Must be in the right range" data-val-between-min="5" data-val-between-max="30" />

Javascript

//The adapter
jQuery.validator.unobtrusive.adapters.add(
  'between', ['min' ,'max'], function (options) {
    options.rules['between'] =  {
      min: options.params.min,
      max: options.params.max
    };
    options.messages['between'] = options.message;
  }
);

//The validation method
jQuery.validator.addMethod("between", function (value, element, params) {
  params.min == 5; //true
  params.max == 30; //true
});

so what about the other adapters

• addBool
• addSingleVal
• addMinMax

They are all pretty simple if you understood the concept of adding a custom adapter using the add() method explained before

You can check Brad Wilson’s article he explained in it the adapters in depth

1. How the jQuery validate plugin works internally
2. Understand the Html generated by the unobtrusive validation in Asp.net MVC
3. How the unobtrusive jQuery validate plugin works internally in Asp.net MVC

What we will be talking about in this article

• The idea of unobtrusive JavaScript
• Difference between normal and unobtrusive validation
• Understanding Unobtrusive validation
  • Inputs and their validation rules and how they work
  • The validation messages and how they work in the unobtrusive validation

The idea of unobtrusive JavaScript

Microsoft released its validation module from the first version of Mvc but it has really matured in every version until finally the release of unobtrusive validation in Asp.net Mvc 3

In short even writing modern JavaScript, which is basically JavaScript in a separate js file. we sometimes need data associated with the Html so we write some metadata JavaScript objects inside the Html page itself and will call a function from the external js file passing it the metadata object in the page

one of the goals of unobtrusive JavaScript is to separate JavaScript from Html markup

To read more about this subject check this article

Difference between normal and unobtrusive validation

We now will see a Model and the corresponding Html generated using MVC 2 and MVC 3 using unobtrusive validation

Our Model

public class ValidationModel {
  [Required]
  public string FirstName { get; set; }

  [Required, StringLength(60)]
  public string LastName { get; set; }

  [Range(1, 130)]
  public int Age { get; set; }
}

The View in MVC 2 using html helpers

<label for="FirstName">FirstName</label>
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" />
<span id="FirstName_validationMessage" class="field-validation-valid"></span>

<label for="LastName">LastName</label>
<input id="LastName" class="text-box single-line" type="text" name="LastName" value="" />
<span id="LastName_validationMessage" class="field-validation-valid"></span>

<label for="Age">Age</label>
<input id="Age" class="text-box single-line" type="text" name="Age" value="" />
<span id="Age_validationMessage" class="field-validation-valid"></span>

<script type="text/javascript">// <![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The FirstName field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":true,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The LastName field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field LastName must be a string with a maximum length of 60.","ValidationParameters":{"max":60},"ValidationType":"length"}]},{"FieldName":"Age","ReplaceValidationMessageContents":true,"ValidationMessageId":"Age_validationMessage","ValidationRules":[{"ErrorMessage":"The field Age must be between 1 and 130.","ValidationParameters":{"min":1,"max":130},"ValidationType":"range"},{"ErrorMessage":"The Age field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Age must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"});
// ]]></script>

The View in MVC 3 using html helpers & unobtrusive validation

<label for="FirstName">FirstName</label>
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />

<label for="LastName">LastName</label>
<input id="LastName" class="text-box single-line" type="text" name="LastName" value="" data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." />

<label for="Age">Age</label>
<input id="Age" class="text-box single-line" type="text" name="Age" value="" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." />

this code was taken from Brad Wilson article

As we can see the Html inputs generated from MVC 2 don’t have any knowledge about what kind of validation rules that are applied to them.
There is only a big JavaScript object containing all the info of the validation applied to every element on this page

On the other hand if we look at the inputs generated with MVC 3 it looks like they have much more metadata info in them and this is all the info needed for validating these fields in a from of data-* attributes and there is no need for a big JavaScript object

<!-- Input generated using MVC2 -->
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" />

<!-- Input generated using MVC3 -->
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />

Understanding Unobtrusive validation

1-Inputs and their validation rules and how they work

so lets explain what happens with these data-* attributes

• MVC outputs the data-* attributes based on the validation rules
• jquery.validate.unobtrusive will read these rules and translate them in a way
• after the unobtrusive validation translates these rules it will call validate() method and pass the rules array with other options to validate it

there are three parts of any unobtrusive rule in any Html element

• The data-val=”true” its just a flag that this element has unobtrusive validation attached to it
• The data-val-rulename=”message” it does two things first it declares that this element has a rule which is the data-val-rulename and the other is the error message which is the value of it
• The data-val-rulename-additionalvalues=”value” this for adding additional values required by the validation rule to complete its validation (Ex. a range validation that must be more than a value and less than a value)

we can take a closer look at a generated input and explain these data-* attributes

<input id="Name" class="ignore" type="text" name="Name" value="" data-val="true" data-val-required="*" data-val-atleastonerequired="Enter at least Name, Email or Lastname" data-val-atleastonerequired-attributes="Email,LName" />

there are two rules attached to this element
one is the built in required attribute and the other is a custom one called atleastonerequired
and when the user doesn’t enter any data and press submit a * will appear as the validation message indicating the element is required and if the user violated the atleastonerequired its validation message would appear instead

2-The validation messages and how they work in the unobtrusive validation

Lets start with an example and build from there

<!-- Required input using unobtrusive validation -->
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />

<!-- The input's validation message placeholder -->
<span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid help-inline" />

As we can see there are two data-* on the validation placeholder

• “data-valmsg-for” its value is the input’s name attribute that this placeholder belongs to , the input & placeholder must be in the same form tag
• “data-valmsg-replace” its true by default the difference between true and false , true will change the text of the placeholder depending on what validation rule was violated if its false it will be static and the content won’t change only the class name will switch on valid and invalid

if there is violation of any of the rules there will be a class name of “field-validation-error” and if there is none the class name will be “field-validation-valid”

this is part of “understanding Asp.net Mvc Unobtrusive Validation” series

1. How the jQuery validate plugin works internally
2. Understand the Html generated by the unobtrusive validation in Asp.net MVC
3. How the unobtrusive jQuery validate plugin works internally in Asp.net MVC

What we will be talking about in this article

• How to validate a form
• The validation messages and how they work
• Add custom validation rules.
• What exactly happens when we call the validate method

How to validate a form ?

There are basically 2 ways to validate your form

1- Use Class names as rules

How it works

We decorate the fields that we want to validate with an html class attribute and that is what will trigger the validation

So if we want a textbox to be required we add to that input element a class value of “required“

Html

<form action="/" method="post">
  <input id="Name" type="text" name="Name" value="" />
  <input type="submit" value="Submit" />
</form>

Javascript

$(document).ready(function() {
  $('form').validate();
});

With this method you can define certain classes with multiple rules

Pros & cons of this approach

• only works with rules that takes no arguments
• we are using the html class attribute for something not related to its original intent which is a break for separation of concerns principle
• but still it’s very easy to setup

Using addClassRules method

Using addClassRules function gives us the ability to use compound rules as a single class

$.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

This will add 2 new class rules, “name” and “zip” so if we have an input element and gave it a class of “zip” it will be required, the user must only insert digits and the length must be exactly 5 characters

<input class="zip" type="text" name="zipCode" />

info: to use a custom message for a specific rule in a compound class rules requires a workaround, you have to alias the rules like “required” to a new rule and in the new rule you define a default message

$.validator.addMethod("newrequired", $.validator.methods.required, "new name is required");

or you can use the “title“ html attribute and it will be the error message for the compound rule

Note: class names validation only works on the validation rules that doesn’t accept any arguments

2- Add rules as JSON object to the validate method

by the name you should have figured out that the validation method takes a json object, we then could specify the fields that we want to validate and the validation rules for it

Html

<form>
  <input id="something" type="text" name="userEmail" />
  <input id="submit" type="submit" value="submit" />
</form>

Javascript

$('form').validate({
  rules: {
    userEmail: {
      email: true,
      required: true
    }
  }
});

note: when you pass the rules object to the validate function the key should be the value of the “name” attribute not the value of the “id” as you can see in the example the key is “userEmail” which is the value of the name attribute and the id is something else

Pros & cons of this approach

• this approach will give us the ability to use more validation rules that require arguments like minlength, remote, equalTo , etc..
• great and manual control over everything
• but the user have to make a separate validate function with different options for every form

Adding or removing dynamic rules

Adding rules

To add a rule we should use the rules method on a jquery elements itself after the form is validated and pass the first parameter the string “add” and the second one an object of rules you want to add for this element (you can also pass a message object for the rules you added)

$('.input').rules('add', {
  required: true,
  messages: {
    required: true
  }
})

Removing rules

if you want to remove a rule or set of rules you pass the string “remove” as the first parameter for the rules method then the second will be a string that containing the rules you want to remove separated by a space

$('.input').rules('remove', 'min max');

More manual approach

accessing the validator object after the form is validated and from it access the rules object and then we can extend or modify it

var validator = $('form').data('validator');

validator.settings.rules.objectName = {
  required: true
}

this approach is very useful if you have an already made rules or messages objects you could extend the rules of the validator with your own

$.extend(validator.settings, { rules: rules, messages: messages });

Note: to understand the validator you can check What exactly happens when we call the validate method section

The validation messages and how they work.

There are 3 ways to provide a validation message

1. pass a “messages” object to the validatemethod the messages object consist of key/value pairs the key is the name of the element and the value is an object containing every rule and its message

   $('form').validate({
     rules: {
       userEmail: {
       email: true,
       required: true
       }
     },
     messages: {
       userEmail: {
       email: "Please enter your email",
       required: "*"
       }
     }
   });
   

2. The value of the “title” attribute on the element

   <input id="Email" title="you have to enter a value" type="text" name="Email" />
   

3. default message when defining the validation rule and there are built in default messages for the built in rules

Note: These 3 ways override each other based on the priority, passing the messages object is the most important and the default message is the least important

Add custom validation rules.

When we want to add more validation rules than the default ones we use $.validator.addMethod

this method accepts as parameters the following

• rule name
• a function that do the validation
• a default message

the function that do the validation can be in 2 different signatures

function validationMethod (value, element)
// OR
function validationMethod (value, element, params)

lets explain these parameters

• value: the value of the DOM element that will be validated
• element: the DOM element itself
• params : is what you pass as a value to this validation ruleExample what paramswill equal

  $('form').validate({
    rules: {
      firstname: {
        compare: {
          type: "notequal",
          otherprop: "lastname"
        }
      }
    }
  });
  

  in this example the params will equal to

  {type:"notequal", otherprop: "lastname"}
  

Example to add custom rule

$.validator.addMethod("notnumbers", function(value, element) {
  return !/[0-9]*/.test(value);
},
"Please don't insert numbers.")

What exactly happens when we call the validate method.

When you call validate on a form mainly couple of things happens behind the scene

• Create a validator object with all the rules and options and attach it to the form.

  The validate method attaches the validator using $.data , you can get it by selecting the form and calling the jquery $.data function and passing it “validator“. The validator object is all the metadata for the validation giving us the ability to access the validate options at anytime in the page cycle

  using this object you can change at runtime the options that you passed to the validate method like adding or removing rules, change what happens when the field is valid or invalid or even provide an ignore selector

  //getting the validator
  var validator = $(".selector").data("validator")
  

  Note: when you call validate on a form that was already validated it will just return the validator object using also $.data and all the options passed to validate method will be omitted

  var validator = $(".selector").validate(/* rules will be omitted */)
  

• subscribe events to the form itself

  What will happens when you click submit and there are invalid elements is you will trigger the validation of the fields, if one of them is not valid then the validate plugin will listen to it more closely to check if it is valid or not

  The events that are subscribed to the form are click, focusin, focusout, keyup, submit

  note: you can disable these events by passing them as keys to the validate method and false as their value

  $(".selector").validate({
    onfocusout: false,
       onkeyup: false,
       onclick: false,
      onsubmit: false
  });
  

See also:

• official jQuery.validate options
• Q&A on how jQuery.validate works
• List of the built-in validation methods