Jquery.validate Hint Error information location method _jquery

The example in this article describes the JQUERY.VALIDATE hint error information location method. Share to everyone for your reference, specific as follows:

For a long time did not use jquery.validate.js this plugin, forgot almost. Alas, the good thing still must often take out to look, today uses the jquery.validate to do a small thing, encounters a question, is the error clue information position question, if knows, is very simple. Have met before, but forget, now mark, in the future forget, in retrospect look. As the saying goes, a good memory is better than a bad pen.

For example, everyone will know what's going on.

Rules: {
name:{
required:true,
rangelength:[1,20]
},
Validatecode: {
required:true,
Number:true,
rangelength:[5,5]
}
,
messages: {
name: {
Required: "Please enter command name",
Rangelength:jQuery.format ("Length please control {0} ~ {1}")
},
Validatecode: {
required: "Please enter the verification code", Number
: " Please enter a number ",
rangelength:jQuery.format (" Length must be 5 bits ")
}
},
success:function (label) {
Label.addclass ("error checked");
},
submithandler:function (form) {
if ($ ("#RegionId"). val () = = ' 0 ') {
$ ("#citySelect"). attr ("Class", "Error"). HTML (' Please select Area '). Show ();
$ ("#RegionId"). attr ("Class", "error");
else{
$ ("#RegionId"). attr ("class", "valid");
$ ("#citySelect"). attr ("class", "valid"). HTML (' Success '). Show ();
Form.submit ();}}
);

In the above code, I did not add the error information to the location of the method, we look at the effect

<td>
<input type= "text" maxlength= "value=" "id=" name "name=" name ">
<label for=" name " Generated= "true" > Please enter the command name </label>
//error message automatically after the input box.
</td>

If we add the error message location method Errorplacement to see what the effect looks like.

Rules: {
name:{
required:true,
rangelength:[1,20]
},
Validatecode: {
required:true,
Number:true,
rangelength:[5,5]
}
,
messages: {
name: {
Required: "Please enter command name",
Rangelength:jQuery.format ("Length please control {0} ~ {1}")
},
Validatecode: {
required: "Please enter the verification code", Number
: " Please enter a number ",
rangelength:jQuery.format (" Length must be 5 bits ")
}
},
errorplacement:function (Error, Element) {/ /Error message Location setting method
Error.appendto (Element.parent (). Next ());//The element here is the object that entered the data
},
success:function ( Label) {
label.addclass ("error checked");
},
submithandler:function (form) {
if ($ ("#RegionId") . val () = = ' 0 ') {
$ ("#citySelect"). attr ("Class", "Error"). HTML (' Please select Area '). Show ();
$ ("#RegionId"). attr ("Class", "error");
else{
$ ("#RegionId"). attr ("class", "valid");
$ ("#citySelect"). attr ("class", "valid"). HTML (' Success '). Show ();
Form.submit ();}}
);

Look at the effect.

<tr>
<th><label for= "name" id= "lname" ><code title= "required" >*</code> command name </label ></th>
<td><input type= "text" maxlength= "value=" "id=" name "name=" name "></td>
<td><label for= "name" generated= "true" > Please enter the command name </label></td>
//error message come here.
</tr>

Simple enough, in simple things, long time will not be forgotten.

More about jquery plug-ins interested readers can view the site topics: "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.