jquery validate usage guide step 4_jquery

By default, the verification prompt information is displayed using the label element, and a css class is added. Through css, it is easy to set the error control and the display method of the error message.

/* 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 method, you can modify the default display method of jquery.validate

By default, label is used to display error messages , can be modified through the errorElement attribute
errorElement: html tag of the error message

$(".selector").validate
errorElement: "em"
})

You can wrap a layer with other elements outside the error message.
wrapper: The outer encapsulating html tag of the error message

$(".selector").validate({
wrapper: "li"
})

Validation The default css class for errors is error, which can be modified through errorClass.
errorClass: css class used when verifying errors

$(".selector").validate({
errorClass: "invalid"
})

Also customize the action when verification is successful
success: If the value is a string, it will be treated as a css class, if it is a function, the function will be executed

$(".selector").validate({
success: "valid"
})

or

success: function(label) {
label.html (" ").addClass("checked");
}

You can also unify error messages into one container for display
errorLabelContainer: Unify error messages into one container for display

$("#myform").validate({
errorLabelContainer: "#messageBox"
})

By default, the error message is placed after the validation element, and the error can be customized The display position of the message

$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next ("td") );
}
})

Furthermore, you can define a group to put the error information from several places in one place, and use error Placement control to put the error information where
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
highlight: Highlight, the default is to add errorClass
unhighlight: Corresponds to highlight, anti-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 error display handle

$(".selector").validate( {
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " this.numberOfInvalids()
" errors, see details below.");
this.defaultShowErrors();
}
})