jQuery Validate custom success message repeats on recheck

Question

So I have this jQuery Validation plugin, and it has a custom success message. The form validates automatically, because it's attached to the body. The problem comes when I wish to check the variable to see if the form is valid. That revalidates it, which ends up adding an extra success message (image in my case) which is undesired. I want the success message to only appear once, regardless of the fact it is validated multiple times. Here's my code:

  $("#makeaComment").validate({
   errorContainer: ".error",
   errorPlacement: function(error, element) {
    error.appendTo( element.next() );
   },
   success: function(label) {
    label.removeClass("error").addClass("check");
   }
  });

  $("#loginAction").click(function() {
   if ($("#makeaComment").valid()) {
    commentLogin();
   }
   else {
    $('#loginAction').attr('value','Fix Errors and Continue');
   }
  });

Thanks!

Jeff Beck · Accepted Answer · 2009-12-28T07:50:15.027

0

With the success function just make sure to either check if the image is already there or clear everything there and add your image. I would go with the former.

Looking at the script it seems it may be making many elements for the error. So instead of removing the class error and adding checked try just adding checked as a new element once. But be sure to remove that class when showing an error.

edited Dec 28 '09 at 07:50

answered Dec 28 '09 at 07:43

Jeff Beck

3,944
3
28
45

Jeff, can you clarify at all how you would just add checked as a new element? I am having the same problem as this poster – Jessica Brown May 09 '11 at 18:25
@jessica to just make sure you don't keep adding the check class over and over looking at the code above you could add another removeClass after the removeclass("error") to do removeClass("check") then do the addClass("check") this will make sure you only have one instance of the check class. – Jeff Beck May 09 '11 at 19:09
I have tried adding `removeClass("valid")` into my success function, however, that does not seem to clear the duplicate instances (though, I do note that `removeClass("error")` does seem to be essential). I have created a separate question @ http://stackoverflow.com/questions/5942425/jquery-validate-success-function-not-clearning-valid-labels-on-re-validate to clarify my problem. I would be much obliged if you have the time to take a quick look at my new post and comment if you have any suggestions. – Jessica Brown May 09 '11 at 21:10

score 0 · Answer 2 · answered May 10 '11 at 19:31

I have figured out finally how to solve this problem! When you remove the "error" class from the valid element, the jquery plugin code skips the code block where the it re-uses the element and instead adds another one. So the easiest way to overcome this is to not remove the error class, but to override the CSS in the valid class.

eg:

label.removeClass("error").addClass("check"); becomes label.addClass("check");

and your CSS might be modified like so:

label.error {
    color: red; 
}
label.valid {
    color: green !important; // !important added 
}

jQuery Validate custom success message repeats on recheck

2 Answers2