jQuery Validate Plugin Add Class errorPlacement Error Label

Question

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 additional 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.

Nick Craver · Accepted Answer · 2010-10-24 10:59:41Z

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; }

user 1007017 · Accepted Answer · 2010-12-27 18:02:40Z

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');
        },

Collectives™ on Stack Overflow

jQuery Validate Plugin Add Class errorPlacement Error Label

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related