How jQuery validation code works

Question

I found this tutorial that uses the jQuery plugin and validation to validate form input. See a working example here. http://jsfiddle.net/nK7Pw/ This seems to work fine, however, I have a question that the html part does not have the mentioned error class, while the code displays an error in front of each field? There is no similar explanation for jQuery either. Thanks for the explanation.

Answer 1

All this is done internally using the validation plugin.

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

It defines default classes and objects for placement in the DOM when an error occurs.

It has an error locating function internally referred to as. It will go through the error list and then call showLabel for the item 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 ); } 

Then it comes 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, it will update the error class and set a new message in the label.

If it does not exist, we do it. It has a large constructor block that sets the attribute and 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 || ""); 

This is a little extra hacker for IE to display 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 here we have the DOM embed code.

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

All of this was inserted from jQuery.validation source. If something else is unclear, feel free to ask. Just searching the file alone, and reading the source should help. I was just looking for a "mistake"

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 , for example ...

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

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