Step 4 of jquery validate Introduction

By default, the label element is used to display the verification prompt information, and CSS class is added. Through CSS, you can easily set the error control and display mode of error information.

/* Input control verification error */
Form input. error {border: solid 1px red ;}

/* Verification error message */
Form label. error {width: 200px; margin-left: 10px; color: red ;}

To customize the display mode, you can modify the default display mode of jquery. Validate.

The label is used by default to Display error messages, which can be modified through the errorelement attribute.
Errorelement: HTML tag of the error message

$ (". Selector"). Validate
Errorelement: "em"
})

You can use other elements to wrap a layer in the error message.
Wrapper: the HTML Tag is encapsulated in the outer layer of the error message.

$ (". Selector"). Validate ({
Wrapper: "Li"
})

The default CSS class for verification errors is error, which can be modified through errorclass.
Errorclass: the CSS class used for error Verification

$ (". Selector"). Validate ({
Errorclass: "invalid"
})

Also customize the action when the verification is successful
Success: If the value is a string, it is treated as a CSS class. If it is a function, it is executed.

$ (". Selector"). Validate ({
Success: "valid"
})

Or

Success: function (Label ){
Label.html (""). addclass ("checked ");
}

You can also unify the error messages to a container for display.
Errorlabelcontainer: Unified error messages to a container for display.

$ ("# Myform"). Validate ({
Errorlabelcontainer: "# MessageBox"
})

By default, error messages are placed after verification elements. You can customize the display location of error messages.

$ (". Selector"). Validate ({
Errorplacement: function (error, element ){
Error. appendto (element. Parent ("TD"). Next ("TD "));
}
})

Further, you can define a group to unify the error information in several places and use the error placement to control where the error information is stored.
Groups: defines a group.

$ (". Selector"). Validate ({
Groups :{
Username: "fname lname"
},
Errorplacement: function (error, element ){
If (element. ATTR ("name") = "fname" | element. ATTR ("name") = "lname ")
Error. insertafter ("# lastname ");
Else
Error. insertafter (element );
}
})

Highlight
Highlight: highlighted. By default, errorclass is added.
Unhighlight: corresponds to highlight and is highlighted in reverse mode.

$ (". Selector"). Validate ({
Highlight: function (element, errorclass ){
$ (Element). addclass (errorclass );
$ (Element. Form). Find ("Label [for =" + element. ID + "]"). addclass (errorclass );
},
Unhighlight: function (element, errorclass ){
$ (Element). removeclass (errorclass );
$ (Element. Form). Find ("Label [for =" + element. ID + "]"). removeclass (errorclass );
}
});

Or you can customize the error display.
Showerrors: The display handle is incorrect.

$ (". Selector"). Validate ({
Showerrors: function (errormap, errorlist ){
$ ("# Summary" pai.html ("Your form contains" + this. numberofinvalids ()
+ "Errors, see details below .");
This. defaultshowerrors ();
}
})