Form Validation with jquery - Highlight Error Field -

I need some help with my jquery verification form. Except the highlight of the error text box part, I have been able to do everything. I need to have the following key:

Whenever a rule breaks for a field, then a yellow background color will apply to that field for 3 seconds; So it turns back on white, can anyone help me with this?

Here's my code:

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Script src = "http://code.jquery.com/jquery-1.9.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; Validate $ {Document} .ready (function () {$ ("# form1") ({Rule: {name: {expected: true, minnothing: 3}, date: {date: true}, email: {// Compound rule requirement: true, email: true}, url: {url: true},}, message: {name: {minlength: jQuery.format ("requires at least {0} characters.")}} });}); & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; * {Font-family: verdana; Font-size: 11px; Line-height: 14px; }. Submit {margin-left: 125px; Margin-top: 10px;} .label {display: block; Swim left; Width: 120px; Text align: right; Margin-right: 5px; } .form-row {padding: 5px 0; Clean both; Width: 700px; } the label. Terror {Width: 250px; Display area; Swim left; Red color; Padding-left: 10px; } Input [type = text], texture {width: 250px; Swim left; } Texture {height: 50px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Form id = "form1" method = "post" action = "" & gt; & Lt; Div class = "form-row" & gt; & Lt; Span class = "label" & gt; Name * & lt; / Span & gt; & Lt; Input type = "text" name = "name" /> gt; & Lt; / Div & gt; & Lt; Div class = "form-line" & gt; & Lt; Span class = "label" & gt; Birthday & lt; / Span & gt; Input  gt; & Lt; / Div & gt; & Lt; Div class = "form-line" & gt; & Lt; Span class = "label" & gt; E-mail * & lt; / Span & gt; & Lt; Input type = "text" name = "email" /> gt; & Lt; / Div & gt; & Lt; Div class = "form-line" & gt; & Lt; Span class = "label" & gt; Home page & lt; / Span & gt; & Lt; Input type = "article" name = "url" /> gt; & Lt; / Div & gt; & Lt; Div class = "form-line" & gt; & Lt; Input class = "submit" type = "submit" value = "submit" & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 I tried to plug it in, but it can not be found to work:  
  $ (". Selector"). Validate (Element, errorClass, validClass) {$ (element) .addClass (errorClass) .removeClass (validClass); $ (element.form) .find ("[+ element.id +" for label] ")" .addClass (ErrorClass);}, unhighlight: function (element, error class, valid class) {$ (element) .removeClass (errorClass) .addClass (validClass); $ (element.form) .find ("label [For = "+ element ID +"] ") .removeClass (errorClass);}}};    
 
 
 Probably will do this:  
 Validate $ (" # Form1 ") ({... highlight: function (element, error class, valid class) {$ (element ) .addClass (errorClass) .removeClass (valid class); $ (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);});}});