Validation of JQuery extension Validate-6 radio, checkbox, and select

Source: Internet
Author: User

The effect is as follows:


The solution to this problem is to specify the error information to a specific location. The parameters of the validate () method can be customized. The sample code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. validator. addMethod ("regex", // addMethod 1st parameters: Method Name
Function (value, element, params) {// addMethod 2nd parameters: verification method,
// Verification method parameter (value of the verified element, verified element, parameter)
Var exp = new RegExp (params); // instantiate a regular object. The parameter is the regular expression passed in by the user.
Return exp. test (value); // test whether a match exists.
},
"Format error ");

$ (Function (){
$ ("# SignupForm"). validate (

{
Rules :{
TxtPassword1: "required", // password 1 is required

TxtPassword2: {// The description of password 2 is more than one object type.
Required: true, // required. It can be an anonymous method.
Failed to: "# txtPassword1", // it must be the same as password 1
Rangelength: [5, 10], // Length 5-10
Regex: "^ \ w + $" // use custom verification rules
},

TxtEmail: "email", // the email address must be valid.
Sex: "required"
},
Messages: {// corresponding to the preceding error message
TxtPassword1: "You must enter ",

TxtPassword2 :{
Required: "You must enter ",
Failed to: "inconsistent passwords ",
Rangelength: "The length must be a string between {0} and {1 ",
Regex: "passwords can only contain numbers, letters, and underscores"
}
},
      
// Add a part in the preceding example
ErrorPlacement: function (error, element) {// specifies the location of the error message
If (element. is (': radio') | element. is (': checkbox') {// if it is radio or checkbox
Var eid = element. attr ('name'); // gets the name attribute of an element.
Error. appendTo (element. parent (); // Add the error message to the end of the parent node of the current element
} Else {
Error. insertAfter (element );
}
},

Debug: false, // The form is not submitted if it is modified to true
SubmitHandler: function (){
Alert ("submitted ");
}
});
});
</Script> <p>
<Label for = "sex">
Gender </label>
<Input type = "radio" id = "rdoFemale" name = "sex"/> male
<Input type = "radio" id = "rdoMale" name = "sex"/> female
</P>

The running result is as follows:

In addition, if debug: true is added to the parameter, the debugging form is used only and will not be submitted to the server. submitHandler: function () {} will execute some operations before the form is submitted to the server; remote can be used for Ajax verification, as if there is a small bug; ASP is used. NET and validate may have some problems when used in combination. For more information, see the blog post of netizens.
Source code download

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.