The validation plugin handles all internal processes automatically.
errorClass: "error",
errorElement: "label",
Default classes and objects are defined in the DOM structure when errors occur.
Internally, there is an error placement function that iterates through the error list and executes the showLabel function on the element and message.
defaultShowErrors: function() {
for ( var i = 0; this.errorList[i]; i++ ) {
var error = this.errorList[i];
this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
this.showLabel( error.element, error.message );
}
Next, the showLabel function is executed.
showLabel: function(element, message) {
var label = this.errorsFor( element );
if ( label.length ) {
// Refresh error/success class
label.removeClass().addClass( this.settings.errorClass );
// Check for a generated label, then replace the message
label.attr("generated") && label.html(message);
If the label already exists, the error class is updated, and the new message is set.
If the label does not exist, a new one is created with specific attributes, class, and message.
} else {
// Create label
label = $("<" + this.settings.errorElement + "/>")
.attr({"for": this.idOrName(element), generated: true})
.addClass(this.settings.errorClass)
.html(message || "");
An additional step is taken for IE to display the label properly.
if ( this.settings.wrapper ) {
// Ensure visibility of the element, especially in IE
// Displaying the wrapped element is handled elsewhere
label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
}
Finally, the code for inserting into the DOM is executed.
if ( !this.labelContainer.append(label).length )
this.settings.errorPlacement
? this.settings.errorPlacement(label, $(element) )
: label.insertAfter(element);
}
This information is sourced from jQuery.validation. For further clarity, feel free to inquire. Reviewing the source code should provide more insights - just search for keyword "error".