Validation of radio, checkbox, select in fact, the method is not much different from the one mentioned earlier, but the problem is that the error message appears after the first element of the same group, and the effect is as follows:
The solution to this problem is to assign the error message to a specific location, which can be customized in the parameters of the Validate () method
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title><script src= "Jquery-1.5.js" type= "text/Web Effects" ></script>
<script src= "Jquery.validate.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript"
JQuery.validator.addMethod ("regex", //addmethod 1th parameter: Method name
function (value, element, params) { //addmethod 2nd Parameter: Authentication method,
//Validation method parameters (values of validated elements, validated elements, parameters)
var exp = new RegExp (params); //instantiation of regular objects, parameters for user-passed regular expressions
return Exp.test (value); //Test Match
},
format error);$ (function () {
$ ("#signupForm"). Validate (The new section in the previous example
{
Rules: {
TxtPassword1: "Required",//password 1 requiredTxtPassword2: { //Password 2 describes more than 1 items using the object type
required:true, //required, this can be an anonymous method
Equalto: "# TxtPassword1 ", //must be equal to password 1
rangelength: [5, 10], //length 5-10 between
Regex: "^ w+$ //Use custom validation rules
},txtemail: "Email", //e-mail must be legal
Sex: "Required"
},
messages: { //corresponds to the error message above
txtPassword1: "You must fill in",TxtPassword2: {
Required: "You must fill in",
Equalto: "Password Inconsistent",
Rangelength: "String length must be between {0} and {1}",
Regex: "Password can only be numbers, letters and underscores"
}
},Errorplacement:function (Error, Element) {//Specify error message Location
if (Element.is (': Radio ') | | | element.is (': CheckBox ')) {//If radio or checkbox
var Eid = element.attr (' name '); Get the element's Name property
Error.appendto (Element.parent ()); To add an error message after the parent node of the current element
} else {
Error.insertafter (Element);
}
},Debug:false,//if modified to true, the form will not be submitted
Submithandler:function () {
Alert ("Beginning of submission");
}
});
});
</script><style type= "Text/css Tutorial" >
*
{
font-size:14px;
}
#signupForm Label.error
{
color:red;
font-size:13px;
margin-left:5px;
padding-left:16px;
Background:url ("Error.png") left no-repeat;
}
</style>
<body>
<form id= "Signupform" method= "Get" action= "" >
<fieldset>
<legend> User Registration </legend>
<p>
<label for= "TxtPassword1" >
Password 1</label>
<input id= "TxtPassword1" name= "TxtPassword1" type= "text"/>
</p>
<p>
<label for= "TxtPassword2" >
Password 2</label>
<input id= "TxtPassword2" name= "TxtPassword2" type= "text"/>
</p>
<p>
<label for= "Txtemail" >
Email </label>
<input id= "Txtemail" name= "Txtemail"/>
</p>
<p>
<label for= "Sex" >
Sex </label>
<input type= "Radio" id= "Rdofemale" name= "sex"/> Male
<input type= "Radio" id= "Rdomale" name= "Sex"/> Female
</p>
<p>
<label for= "Txtage" >
Age </label>
<input id= "Txtage" name= "Txtage" min= "a" max= ""/>
<!--age is only between 18-45-->
</p>
<p>
<input type= "Submit" value= "submitted"/>
</p>
</fieldset>
</form>
</body>
If you add debug:true to the parameter, only the debug form will not be submitted to the server; Submithandler:function () {} will perform some action before the form is submitted to the server; Ajax can be validated with remote, as if there was a small bug
The results of the operation are as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
