How ASP. net mvc asynchronous verification works 03. How does jquery. validate. unobtrusive. js work,

How ASP. net mvc asynchronous verification works 03. How does jquery. validate. unobtrusive. js work,

In the previous article "How ASP. net mvc asynchronous verification works 02, how to create an asynchronous validation form element", I learned how ASP. NET asynchronous verification creates form elements.jquery.validate.unobtrusive.jsThe entire process of asynchronous verification.

 

Injquery.validate.unobtrusive.jsThe following call is shown at the end of the file:

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

 

It can be seen that the document object on the current page is passed$jQval.unobtrusive.parseMethod to enable the form elements of the page to be verified asynchronously. The parse method performs asynchronous verification on all forms.

{
parse: function (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();
  }
});
}
}

First, traversedata-val=trueThe input element$jQval.unobtrusive.parseElementMethod to capture information about asynchronous verification in html elements and encapsulate itjquery.validate.unobtrusive.jsCan recognize other metadata.$jQval.unobtrusive.parseElementThe first parameter of the method indicates the verified form element. When the second parameter is true, it indicates that the verification of form elements is skipped. If only one element is verified, it is set to true. If multiple elements are verified, it is set to false. The default value is false.

 

InvalidationInfoThis object contains all the information required for asynchronous verification.attachValidationInvalidationInfoAll verification rules in the object are passedvalidateMethod.

 

RelatedvalidationInfoDetails:

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;
}

AbovevalidationInfoIn the constructor$form.dataMethod, which can be obtained or setunobtrusiveValidation. InunobtrusiveValidationThis object contains the information required for asynchronous Verification:

1. NameoptionsContains the verification rules and error information.
2,attachValidationThe method is used to bind a custom event to the form, and each call or releasereset.unobtrusiveValidationAll methods are called.onResetMethod.

 

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");
}

3,validateIndicates that you can customize verification events.

 

WhilevalidationInfoAll verification rules in the object are passedvalidateWhat really works when the method is$.validator.unobtrusive.adaptersIn this waydata-*Can bevalidateMethods. To customize asynchronous verification rules, you must passjQuery.validator.unobtrusive.adapters.add(adapterName, [params], function(element, form, message, params, rules,messages){})Method.

 

Where,adapterNameAnddata-val-ruleNameInruleNameMatch. The adapter can be expanded as follows:

jQuery.validator.unobtrusive.adapters.addBool(adapterName, [ruleName]);
jQuery.validator.unobtrusive.adapters.addSingleVal(adapterName, attribute, [ruleName]);
jQuery.validator.unobtrusive.adapters.addMinMax(adapterName, minRuleName, maxRuleName, minMaxRuleName, [minAttribute, [maxAttribute]]);