Validation of jquery extension plug-in Validate-6radio, checkbox, select

Source: Internet
Author: User

The verification methods of radio, checkbox, and select are not much different from those mentioned above, but the problem is that the error message is displayed after the first element in the same group. 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:

View code

< Script Type = " Text/JavaScript " >
Jquery. validator. addmethod ( " RegEx " , // Addmethod 1st parameters: Method Name
Function (Value, element, Params ){ // Addmethod 2nd parameters: verification method,
// Verification Method parameters (values of verified elements, verified elements, parameters)
VaR Exp =   New Regexp (Params ); // Instantiate a regular object. The parameter is the regular expression passed by the user.
Return Exp. Test (value ); // Test Matching
},
" Incorrect format " );

$ (Function(){
$ ("# Signupform"). Validate (

{
Rules :{
Txtpassword1: " Required " , // Password 1 is required

Txtpassword2 :{ // The description of password 2 contains more than one object type.
Required: True , // Required. It can be an anonymous method.
Similar: " # Txtpassword1 " , // Must be equal to 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 above error message
Txtpassword1: " You must enter " ,

Txtpassword2 :{
Required: " You must enter " ,
Similar: " Inconsistent passwords " ,
Rangelength: " The string must be between {0} and {1 }. " ,
RegEx: " The password can only contain numbers, letters, and underscores. "
}
},
//The Section added in the preceding example
Errorplacement: Function (Error, element ){ // Specify the location of the error message
If (Element. Is ( ' : Radio ' ) | Element. Is ( ' : Checkbox ' )){ // If it is radio or checkbox
VaR Eid = Element. ATTR ( ' Name ' ); // Obtains 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 , // If it is set to true, the form is not submitted.
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.

 

1. All buttons in ASP. NET will be parsed to submit, and all the buttons will trigger verification. If you want a button to not trigger verification, you can add this style: class = "cancel"

 

Source code download

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.