Jquery.validate Manual (4)

By default, the validation prompt is displayed with a LABEL element, and the CSS class is added, which makes it easy to set the error control and how the error message is displayed.

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

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

If you want to customize the display mode, you can modify the default display of the Jquery.validate

The default label displays the error message, 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 envelope of the error message encapsulates the HTML tag

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

The CSS class that validates the error is error by default and can be modified by Errorclass
Errorclass: Verify the CSS class used when an error occurs

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

Also customize the action when validation succeeds
Success: If the value is a string, it is treated as a CSS class, and if it is a function, the function is executed

$ (". 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 error messages into one container display

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

By default, the error message is placed after the validation element, and you can customize where the error message is displayed

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

Further, you can define a group, place the error information in several places in one place, and use the error placement to control where the error message is placed.
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: Highlight, default is add Errorclass
Unhighlight: Corresponds to highlight, anti-highlight

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

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