redconservatory redconservatory - 12 days ago 5
jQuery Question

jQuery validate add class to error element?

I have the following code using jQuery Validate.

$("#register").validate({
debug: true,
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass)
{
$(element).parents("div.control-group")
.addClass(errorClass)
.removeClass(validClass);

},
unhighlight: function (element, errorClass, validClass)
{
$(element).parents(".error")
.removeClass(errorClass)
.addClass(validClass);
}
});


Is there a way to add a class to the errorElement, 'span' so that it's...:

<span class="help-inline error">Message</span>

Answer

When you specify the errorClass, there's nothing stopping you from making it two things: "help-inline error", i.e.:

$("#register").validate({
    debug: true,
    errorClass: 'error help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass(errorClass).addClass(validClass);
    }
});

Note that you have to use version 1.10 of jQuery Validate to support this. Earlier versions only allow one errorClass.