JQueryValidate Form Verification deep learning _ jquery

This article describes how to get started with jQueryValidate form verification. This plug-in is bundled with a set of useful verification methods, including URL and email verification, at the same time, an API is provided for Writing user-defined methods. For more information, see the previous article about jQuery Validate form verification. For more information, see JQuery Validate Form Verification getting started ,Today, I am going to learn more about jQuery Validate form verification. The following is all about this article:

1. use other methods to replace the default SUBMIT

$().ready(function() { $("#signupForm").validate({    submitHandler:function(form){      alert("submitted");        form.submit();    }    });});

Ajax

 $(".selector").validate({    submitHandler: function(form)   {      $(form).ajaxSubmit();     }  }) 

You can set the default value of validate as follows:

 $.validator.setDefaults({ submitHandler: function(form) { alert("submitted!");form.submit(); }});

To submit a form, use form. submit () instead of $ (form). submit ().
2. debug: only verify that the form is not submitted
If this parameter is set to true, the form is not submitted and only checked. This is very convenient for debugging.

$().ready(function() { $("#signupForm").validate({    debug:true  });});

If you want to set multiple forms to debug on a page, use:

$.validator.setDefaults({  debug: true})

3. ignore: ignore some elements and do not verify
Ignore: ". ignore"
4. Change the location where the error message is displayed.
ErrorPlacement: Callback
Specifies the location where the error is placed. The default situation is: error. appendTo (element. parent (); that is, the error information is placed after the verification element.

errorPlacement: function(error, element) {   error.appendTo(element.parent()); }

Instance

  First Name              14/02/07            02/14/07             
            I have read and accept the Terms of Use.    
  errorPlacement: function(error, element) {  if ( element.is(":radio") )    error.appendTo( element.parent().next().next() );  else if ( element.is(":checkbox") )    error.appendTo ( element.next() );  else    error.appendTo( element.parent().next() );}

Functions of codeYes: Normally, the error information is displayed in, If it is radio, it is displayed in. If it is a checkbox, it is displayed after the content.
Default Value of parameter type description
ErrorClass String specifies the css Class Name of the error message. You can customize the style of the error message. "Error"
The label used for errorElement String to mark errors. The default value is label, which can be changed to em. "Label"
ErrorContainer Selector displays or hides the verification information. It can automatically display the container attribute when an error message is displayed, and hide it when no error occurs, which is of little use.
ErrorContainer: "# messageBox1, # messageBox2"
ErrorLabelContainer Selector stores error messages in a container.
The label used by wrapper String to package the preceding errorELement.
Generally, these three attributes are used at the same time to display all error prompts in a container and hide them automatically when there is no information.
ErrorContainer: "p. error ",
ErrorLabelContainer: $ ("# signupForm p. error "),
Wrapper: "li"
5. Change the display style of the error message.
Set the style of the error message. You can add an icon to display the error message. A validation.css file has been created in the system to maintain the style of the validation file.

input.error { border: 1px solid red; }label.error { background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200;}label.checked { background:url("./demo/images/checked.gif") no-repeat 0px 0px;}

6. Each field passes the function verification.
Success: String, Callback
If an element is followed by a string, it is treated as a css class or a function.

success: function(label) {  // set   as text for IE  label.html(" ").addClass("checked");  //label.addClass("valid").text("Ok!")}

Add "valid" to the verification element and define the style in CSS.
Success: "valid"
7. Modify the trigger mode for verification
Although the following values are boolean, we recommend that you do not add them unless you change them to false.
Default Value of trigger method type description
Onsubmit Boolean verification when submitting. If it is set to false, use other methods for verification. True
Verification when onfocusout Boolean loses focus (excluding check boxes/Single-choice buttons ). True
Onkeyup Boolean is verified during keyup. True
Onclick Boolean is verified when you click the check box and single-choice button. True
After focusInvalid Boolean submits a form, vertices are obtained for the form that has not passed verification (the first form that has been focused or a form that has not passed verification before submission. True
If the focusCleanup Boolean is true, the error prompt is removed when the focus is obtained for the element that fails to pass the verification. Avoid using it with focusInvalid. False

// Reset the form $ (). ready (function () {var validator = $ ("# signupForm "). validate ({submitHandler: function (form) {alert ("submitted"); form. submit () ;}}); $ ("# reset "). click (function () {validator. resetForm ();});});

8. asynchronous Verification
Remote: URL
If you use ajax for verification, the value of the current verification is submitted to the remote address by default. If you need to submit other values, you can use the data option.

Remote: "check-email.php" remote: {url: "check-email.php", // background handler type: "post", // data sending method dataType: "json ", // accept the data format data: {// username: function () {return $ ("# username "). val ();}}}

The remote address can only output "true" or "false". No other output is allowed.
9. add custom Verification
AddMethod: name, method, message
Custom Verification Method

// Two bytes of text in jQuery. validator. addMethod ("byteRangeLength", function (value, element, param) {var length = value. length; for (var I = 0; I <value. length; I ++) {if (value. charCodeAt (I)> 127) {length ++;} return this. optional (element) | (length> = param [0] & length <= param [1]) ;}, $. validator. format ("make sure that the input value is between {0}-{1} bytes (one text is counted as two bytes)"); // zip code verification jQuery. validator. addMethod ("isZipCode", function (value, element) {var tel =/^ [0-9] {6} $/; return this. optional (element) | (tel. test (value) ;}, "Please enter your zip code correctly ");

Note: add in the additional-methods.js file or in the jquery. validate. js file. It is recommended to write it in the additional-methods.js file.
Note: In the messages_cn.js file, add isZipCode: "Only Chinese characters, English letters, numbers, and underscores are allowed ". Add a reference to the additional-methods.js file before calling.
10. radio, checkbox, and select Verification
Required of radio indicates that one must be selected.

The required of the checkbox indicates that it must be selected.The minlength of the checkbox indicates the minimum number that must be selected, maxlength indicates the maximum number of selected items, and rangelength: [2, 3] indicates the selected number range.Select required indicates that the selected value cannot be blank.    Buga  Baga  OiThe minlength of select indicates the minimum number of selected items (multiple select options are available), maxlength indicates the maximum number of selected items, and rangelength: [2, 3] indicates the selected number range.  Banana  Apple  Peach  Turtle

Appendix: built-in verification method:

The above is an in-depth study of jQuery Validate form verification. I hope it will be helpful to you.