CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-validate
aherrick
aherrick

Reputation: 20169

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

Upvotes: 1

Views: 5342

Answers (2)

user 1007017
user 1007017

Reputation: 391

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

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

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

Upvotes: 2

Related Questions