Customize Unobtrusive JQuery Validation Trigger

Sometime it’s required to change a default behavior of an external component. In this blog post we’ll see how to change the validation trigger default behavior. We’ll cover the unobtrusive JavaScript with JQuery validation with ASP.NET MVC application.

Problem

The validation doesn’t trigger while the user is entering data in the input field. Default behavior shows errors either on ‘onfocusout’ or when submitting the form.

Solution:

Write a custom handler for ‘onkeyup’ event, attach it with JQuery validator and trigger the unobtrusive js event for form invalidation.



Here’s the complete code snippet that will do the trick for you by enabling the ‘onkeyup’ event:

$(document).ready(function()
 {
    var $validatr = $('form').data('validator');
    varsettngs = $validatr.settings;


    settngs.onkeyup = function(element, eventType)
    {
        if (!$validatr.element(element))
        {
            $(this.currentForm).triggerHandler("invalid-form", [this]);
        }
    };


    settngs.onfocusout = false;
});

Explanation: 

1. Get the validator object.
   
   var $validatr = $('form').data('validator');
   
   
2. Adding a new event handler for ‘onkeyup’ event of Validator object. The handler takes two arguments; the source element and the event occurred. Validate the element, if it’s invalid trigger the unobtrusive form validation event, which will build up the validation errors summary.
   

varsettngs = $validatr.settings;

settngs.onkeyup = function(element, eventType)
{
    if (!$validatr.element(element))
    {
        $(this.currentForm).triggerHandler("invalid-form", [this]);
    }
}

3. Disable any other events if you like.
   
   settngs.onfocusout = false;
   

Here’s the result: