jQuery Validate Plugin Add Class errorPlacement Error Label

Using the errorPlacement hook I am able to add a certain class to a certain error element. However once the form has attempted to submit the second time, it looses that class I added. See the following code for the example.

http://www.jsfiddle.net/NU63P/1

How can I keep that addit开发者_开发百科ional class on the element through the entire life-cycle of the validation process? Is there another hook where I need to add the class back? Ultimately what I'm trying to accomplish is I want to add a specific class to just second text box error label.

Unfortunately there's not a straight-forward way to do this provided by the API because it made (in my opinion) a bad decision here:

showLabel: function(element, message) {
  var label = this.errorsFor( element );
  if ( label.length ) {
    label.removeClass().addClass( this.settings.errorClass );
                   //^ right here
  }

This is what's removing all your classes, and unfortunately it's also the last thing to run in the invalid handler pipeline. However, it's called by defaultShowErrors() which you can call yourself by overriding the showErrors option, like this:

$(function() {
  $('form').validate({
    showErrors: function(errorMap, errorList) {
      this.defaultShowErrors();
      $(this.currentForm).find('label[for=text2].error').addClass('errorextra');
    }
  });
});

You can test it out here.

The other option, if you're only supporting newer browsers would be to do this completely in CSS:

label[for=text2].error { margin-left: 10px; }

Perfect! Thanks!

I'm using an editor (ckeditor). With this addition which is made in $("#form1").validate I'm now able to hide the generated error message if something will be entered in the editor.

Here the relevant parts of my code... HTH for someone...

updateTextArea1 on keyup

CKEDITOR.instances.editor1.on("instanceReady", function()
             {
               //set keyup event
               this.document.on("keyup", updateTextArea1);
                //and paste event
               this.document.on("paste", updateTextArea1);

             });

get the data of editor1, update the editor and hide the error message

function updateTextArea1()
        {
            CKEDITOR.tools.setTimeout( function()
            { 
            var oEditor1 = CKEDITOR.instances.editor1;
            var content1 = oEditor1.getData();

            CKEDITOR.instances.editor1.updateElement();
            $(".error.errorextra1").hide() 
            }, 0);  
        }

adding the additional class to the generated error message of jquery validator

    var validator = $("#form1").validate({

        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $(this.currentForm).find('label[for=editor1].error').addClass('errorextra1');
            $(this.currentForm).find('label[for=editor2].error').addClass('errorextra2');
        },