JQuery. validate common methods and issues needing attention _ jquery

JQuery. validate common methods and issues to be aware of. For more information, see 1. use other methods to replace the default SUBMIT.

The Code is as follows:

$ (). Ready (function (){
$ ("# SignupForm"). validate ({
SubmitHandler: function (form ){
Alert ("submitted ");
Form. submit ();
}
});
});

Ajax

The Code is as follows:

$ (". Selector"). validate ({
SubmitHandler: function (form)
{
$ (Form). ajaxSubmit ();
}
})

You can set the default value of validate as follows:

The Code is 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.

The Code is as follows:

$ (). Ready (function (){
$ ("# SignupForm"). validate ({
Debug: true
});
});

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

The Code is as follows:

$. 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

Default: Put the error message behind the verification element.
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 ());
}

// Example:

The Code is as follows:

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

The purpose of the code is to display the error information inIn, If the checkbox is displayed after the content

ErrorClass: String Default: "error"
Specifies the css Class Name of the error message. You can customize the style of the error message.

ErrorElement: String Default: "label"
Label used to mark errors. The default label can be changed to em.

ErrorContainer: Selector
Display or hide the verification information. The Container attribute can be automatically displayed when an error message is displayed, and hidden when no error occurs, which is of little use.
ErrorContainer: "# messageBox1, # messageBox2"

ErrorLabelContainer: Selector
Put the error information in a container.

Wrapper: String
Label used to pack the above errorELement

These three attributes are usually 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.
You can add a graphic display with incorrect prompts. In this system, a validation.css image is created to maintain the style of the validation file.

The Code is as follows:

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
The action after the element to be verified passes the verification. If it is followed by a string, it will be treated as a css class or a function.

The Code is as follows:

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.

Onsubmit: Boolean Default: true
Verification upon submission. use other methods to verify if the value is false.
Onfocusout: Boolean Default: true
Missing focus is verification (excluding checkboxes/radio buttons)
Onkeyup: Boolean Default: true
Verification during keyup.
Onclick: Boolean Default: true
Verify when checkboxes and radio are clicked
FocusInvalid: Boolean Default: true
After a form is submitted, a form that has not passed the verification (the first form or a form that has not passed the verification that has received the focus before submission) will get the focus
FocusCleanup: Boolean Default: false
If this parameter is set to true, the error message is removed when the unverified element gets the focus. Avoid using it with focusInvalid

The Code is as follows:

// 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.

The Code is as follows:

Remote: "check-email.php"

Remote :{
Url: "check-email.php", // background Handler
Type: "post", // data transmission method
DataType: "json", // accept the data format
Data: {// data to be passed
Username: function (){
Return $ ("# username"). val ();
}
}
}

The remote address can only output "true" or "false", but cannot output other parameters.

9 add custom Verification
AddMethod: name, method, message
Custom Verification Method

The Code is as follows:

// Two Chinese characters
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 (two bytes for one text )"));

// Postal 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 ");

1. Add in the additional-methods.js file or in jquery. validate. js
It is recommended to be written in additional-methods.js files

2. 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.

Verification of 10radio, checkbox, and select

1. required of radio indicates that one of

The Code is as follows:

2. the checkbox required indicates that the checkbox must be selected.

The Code is as follows:

The minlength of checkbox indicates the minimum number of required items, and maxlength indicates the maximum number of selected items. rangelength: [2, 3] indicates the selected number range.

The Code is as follows:

3. select required indicates that the selected value cannot be blank.

The Code is as follows:

Buga Baga Oi

The 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.

The Code is as follows:

Banana Apple Peach Turtle