jQuery Validate custom success message repeats on recheck.

Question

Hello! (Again)

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!

Answer 1

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.