This article describes the usage of custom verification. Share it for your reference, as follows:
1. Custom verification-success prompt
1) Add options
errorClass: "unchecked",
validClass: "checked",
errorElement: "span",
errorPlacement: function (error, element) {
if (().find("span[for=""" + ("id") + """]") != null) {
().find("span[for=""" + ("id") + """]").remove();
}
(());
},
success: function (label) {
("unchecked").addClass("checked");
},
2) Set style
{border: 1px ＃E6594E dotted;}
{
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background:url("/Common/Sys/Cfg/images/") no-repeat 3px;/* ＃FCEAE8 */
}
{
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;border: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background: ＃FCEAE8 url("/Common/Sys/Cfg/images/") no-repeat 3px;
}
2. Custom verification-select prompts
1) Add options
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: ""li"",
meta: "validate",
errorClass: "unchecked",
validClass: "checked",
2) Set style
{border: 1px ＃E6594E dotted;}
{
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background:url("/Common/Sys/Cfg/images/") no-repeat 3px;/* ＃FCEAE8 */
}
{
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;border: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background: ＃FCEAE8 url("/Common/Sys/Cfg/images/") no-repeat 3px;
}
{
background-color: ＃eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
ol li {
list-style-type: disc;
margin-left: 20px;
}
{ display: none }
.container {
display: inline;
}
3) Add a tag to select the table
<div class="container"> <h4>There are serious errors in your form submission, please see below for details.</h4> <ul></ul> </div>
For more information about jQuery, please visit the special topic of this site:Summary of jQuery extension skills》、《Summary of commonly used plug-ins and usages of jQuery》、《Summary of jQuery switching effects and skills》、《Summary of jQuery traversal algorithm and skills》、《Summary of common classic effects of jQuery》、《Summary of jQuery animation and special effects usage"and"Summary of jquery selector usage》
I hope this article will be helpful to everyone's jQuery programming.