Question

Picture of problem: http://tinypic.com/view.php?pic=2duwlsp&s=5

Description of problem: I have a jQuery form validation which is “working”, except for one visual bug. When you first cause a validation error, everything displays as it should. But if you fix the error, then re-cause the error, the image does not show up on the second time.

See screenshot above for pictures of the problem.

My code:

 <script type="text/javascript">
    $(document).ready(function(){
      $('#signupform').validate({
           wrapper: 'span class="error"',
           meta: 'validate', 
           highlight: function(element, errorClass, validClass) {
               if (element.type === 'radio') {
                      this.findByName(element.name).addClass(errorClass).removeClass(validClass);
              } else {
                      $(element).addClass(errorClass).removeClass(validClass);
               }

              // Show icon in parent element
              var error = $(element).parent().find('span.error');

              error.siblings('.icon').hide(0, function() {
                error.show();
              });
            },


             unhighlight: function(element, errorClass, validClass) {
              if (element.type === 'radio') {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
              } else {
                $(element).removeClass(errorClass).addClass(validClass);
              }

              // Hide icon in parent element
              $(element).parent().find('span.error').hide(0, function() {
                $(element).parent().find('span.valid').fadeIn(200);
              });
            },
            "rules":{"username":{"required":true,"remote":{"url":"http:\/\/localhost\/welcome\/remote","type":"post"}}},"onkeyup":false});
             });
 </script>

What I’ve tried: I’ve tried looking at the highlight and unhighlight functions. My “guess” is the error is in the “unhighlight” section, because it only occurs after the 2nd error (i.e. highlight, unhighlight, highlight->error)

So perhaps I’m removing something I shouldnt?

Answer 1

worked it out. Change

         // Show icon in parent element
          var error = $(element).parent().find('span.error');

          error.siblings('.icon').hide(0, function() {
            error.show();
          });

to

         // Show icon in parent element
          var error = $(element).parent().find('span.error');

            error.show();
          },