Unobtrusive validation doesn't work with Ajax.BeginForm

Question

I have View with Model1 where I put Ajax.BeginForm() and in this View i have PartialView with Model2 where i put Ajax.BeginForm(). So only in first

Answer 1

The answer of Darin Dimitrov only works when validate() of the jquery validate plugin has not been called until the Ajax success handler is called. I can't think of a scenario where this could be the case, thus i wonder why the answer was accepted as correct.

Perhaps a change in the jquery validate code in the past now causes the following issue:

The issue is that validate() executes the following line first

// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
  return validator;

which means that the validator object is returned when validate() is called without and further handling of the options passed.

This also means that a later call to $.validator.unobtrusive.parse(...) or $.validator.unobtrusive.parseElement(...) which executes a

$form.validate(this.options) <- this.options holds the new rules parsed from HTML

to update the options of the validator has no effect because the options are not processed at all.

The solution here is to update the validator manually like

var $htmlCode = $("your html");

$.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

// now get the validation info collected in parse()
var validationInfo = $form.data("unobtrusiveValidation"); 

var $validator = $form.validate(); // get validator and ...
$validator.settings.rules = validationInfo.options.rules; // ... update its rules
$validator.settings.messages = validationInfo.options.messages; // ... update its messages

Revalidating the form (e.g. clicking submit) should now result in the expected results.

Here is a full example witch also includes code from the already accepted answer:

Razor

@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    
}

Javascript

var onSuccess = function(result) {
    var $htmlCode = $(result);

    $.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

    // now get the validation info collected in parse()
    var validationInfo = $form.data("unobtrusiveValidation"); 

    var $validator = $form.validate(); // get validator and ...
    $validator.settings.rules = validationInfo.options.rules; // ... update its rules
    $validator.settings.messages = validationInfo.options.messages; // ... update its messages
};

--

As a side note, manually updating the validator is also possible by using the rules() method like

$yourHtmlField.rules( "add", {
  required: true,
  messages: {
    required: "Required input"
  }
});

as this directly updates the rules of the validator without the unobtrusive stuff. But then the data-val attributes are rendered useless.