how jQuery validation code works

Question

I found this tutorial which uses jQuery and validation plugin to validate form input. Please see the working example here. http://jsfiddle.net/nK7Pw/ This seem to work fine, however I have a question that in the html part, there is no where mentioned error class, then how does the code displays the error just in front of each field? There is no such explanation in the jQuery part too. Thanks for explaining.

Answer 1

It's all done internally by the validation plugin.

errorClass: "error",
errorElement: "label",

It defines default classes and objects to place in the DOM when an error occurs.

It has an error placement function called internally. It will loop through the error list and then call showLabel on the element & 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 );
            }

Then it comes along and runs the showLabel function.

showLabel: function(element, message) {
            var label = this.errorsFor( element );
            if ( label.length ) {
                // refresh error/success class
                label.removeClass().addClass( this.settings.errorClass );
                // check if we have a generated label, replace the message then
                label.attr("generated") && label.html(message);

If the label already exists Then it will refresh the error class and set the new message in the label.

If it didnt exist then we make one. It has a large constructor block, setting the attribute and the class as well as the message.

            } else {
                // create label
                label = $("<" + this.settings.errorElement + "/>")
                    .attr({"for":  this.idOrName(element), generated: true})
                    .addClass(this.settings.errorClass)
                    .html(message || "");

It does a bit of extra hackery to for IE to show the label

                if ( this.settings.wrapper ) {
                    // make sure the element is visible, even in IE
                    // actually showing the wrapped element is handled elsewhere
                    label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
                }

And right here we have the DOM insertion code.

                if ( !this.labelContainer.append(label).length )
                    this.settings.errorPlacement
                        ? this.settings.errorPlacement(label, $(element) )
                        : label.insertAfter(element);
            }

This has all been pasted from the jQuery.validation source. If something else is unclear feel free to ask. Just searching through the file alone and reading the source should help. I just searched for "error"

Answer 2

It places its own label element after each input element that has error'd.

Example

<label for="email" generated="true" class="error">
  Please enter a valid email address
</label>

You can configure this with the errorPlacement callback, like so...

$('form').validate(
   errorPlacement: function(error, element) {
      element.before(error);
   }
);

You can use a DOM inspector tool to see the new HTML placed. There is Firebug for Firefox, and there are built in ones for Safari and Chrome. Even IE8 has one.