Form Validation with jquery - Highlight Error Field

Question

I need some help with my jquery validation form. I managed to get everything to work except for the highlight of the error text box part. I need the following tho happen:

Whenever an rule get broken for a field, that field must have a yellow background color applied to it for 3 seconds; then it changes back to white. Can someone please help me with this?

Here is my code:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js">    </script>

    <script type="text/javascript"> 
    $(document).ready(function() {  
    $("#form1").validate({ 



        rules: { 
          name: {
                  required: true,
                  minlength: 3
                },

          date: {
                  date:true
                },

          email: {// compound rule 
            required: true, 
            email: true 
                 }, 
        url: { 
          url: true 
        },


        }, 
        messages:
        { 
          name: {
          minlength: jQuery.format("At least {0} characters required.")
                }
        }




      }); 
    }); 
  </script> 


<style type="text/css"> 
    * { font-family: Verdana; font-size: 11px; line-height: 14px; } 
    .submit { margin-left: 125px; margin-top: 10px;} 
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; } 
    .form-row { padding: 5px 0; clear: both; width: 700px; } 
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; } 
    input[type=text], textarea { width: 250px; float: left; } 
    textarea { height: 50px; } 
</style> 

</head>
 <body>
      <form id="form1" method="post" action=""> 
        <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
            <div class="form-row"><span class="label">Birthdate </span><input type="text" name="date" /></div>
            <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
            <div class="form-row"><span class="label">Home page</span><input type="text" name="url" /></div> 

          <div class="form-row"><input class="submit" type="submit" value="Submit"></div> 
        </form>

    </body>
    </html>

I tried to plug this in but just can't get it to work:

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
  $(element).addClass(errorClass).removeClass(validClass);
  $(element.form).find("label[for=" + element.id + "]")
                .addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
 $(element).removeClass(errorClass).addClass(validClass);
 $(element.form).find("label[for=" + element.id + "]")
                .removeClass(errorClass);
}
});

Hi Barmar, that is the part I am struggling with. The "I tried to plug this is (above)" is what I found, but I am not sure how to plug it into my code. — tidydee
– tidydee, Commented Mar 27, 2013 at 7:57
But the above code doesn't come close to doing what you want, so I don't understand why you tried to plug it in. You need to do something with setTimeout() to do something 3 seconds later. — Barmar
– Barmar, Commented Mar 27, 2013 at 8:00
I Only tried to use that code cause it was in the jquery "validations". — tidydee
– tidydee, Commented Mar 27, 2013 at 8:28
Would you know how to go about achieving something like this with setTimeout? — tidydee
– tidydee, Commented Mar 27, 2013 at 8:29
What is $(".selector") supposed to be? You must put highlight and unhighlight inside of your original $("#form1").validate() function if it supposed to be for #form1. — Sparky
– Sparky, Commented Mar 27, 2013 at 15:16

Barmar · Accepted Answer · 2013-03-28 03:37:42Z

2

Maybe this will do it:

$("#form1").validate({
   ...
   highlight: function(element, errorClass, validClass) {
      $(element).addClass(errorClass).removeClass(validClass);
      $(element.form).find("label[for=" + element.id + "]")
                     .addClass(errorClass);
      setTimeout(function() {
          $(element).removeClass(errorClass).addClass(validClass);
          $(element.form).find("label[for=" + element.id + "]")
                         .removeClass(errorClass);
      });
   }
});

edited Mar 28, 2013 at 3:37

answered Mar 27, 2013 at 8:36

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tidydee Over a year ago

One more question... can i plug this in right under the messages section..?

Sparky Over a year ago

This is not correct, $(".selector").validate(), when his form is called #form1. Custom highlight and unhighlight callbacks must go inside of the initial $("#form1").validate() if they're intended for that form.

Sparky Over a year ago

Your code also has some syntax issues, missing and unclosed braces, etc.

Barmar Over a year ago

I've added the missing parens and braces. I think you should be able to insert this stuff before or after your other validation options.

Collectives™ on Stack Overflow

Form Validation with jquery - Highlight Error Field

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related