jquery Validate use strategy fourth step _jquery

By default, the validation prompt is displayed with a LABEL element, and CSS class is added, which makes it easy to set error controls and display the error messages by using CSS.

/* Input Control validation Error *
Form Input.error {border:solid 1px red;}

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

If you want to customize the display style, you can modify the default display for Jquery.validate

The default is to display the error message with the label, which can be modified by the Errorelement property
Errorelement: HTML tag for error messages

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

You can wrap a layer of other elements in an error message.
Wrapper: The outer layer of the error message encapsulates the HTML tag

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

Validation error CSS Class default is error, through Errorclass can modify
Errorclass: CSS class used when validating an error

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

Also customize the actions when validation succeeds
Success: If the value is a string, it will be treated as a CSS class, and if it is a function, execute the function

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

Or

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

You can also unify the error message to a container display
Errorlabelcontainer: Unifies the error message to a container display

$ ("#myform"). Validate ({
Errorlabelcontainer: "#messageBox"
})

By default, the error message is placed behind the validation element to customize the display location of the error message

$ (". Selector"). Validate ({
Errorplacement:function (Error, Element) {
Error.appendto (Element.parent ("TD"). Next ("TD");
}
})

Further, you can define a group, place the error information in a few places in one place, and use the error placement to control where to put the error message.
Groups: Define 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 Display
Highlight: Highlighted, the default is to add Errorclass
Unhighlight: Corresponding to highlight, inverse highlighting

$ (". 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 completely customize the error display
ShowErrors: Get the wrong display handle

$ (". Selector"). Validate ({
Showerrors:function (Errormap, errorlist) {
$ ("#summary"). HTML ("Your form contains" + This.numberofinvalids ()
+ "errors, the details below.");
This.defaultshowerrors ();
}
})