Question

I’m working on a web form where I wish to (after form submission) highlight those input fields that weren’t entered correctly.

The highlight effect I wish to create is an endlessly looping animation between background-color: #fcc; and #fff; in the faulty input fields, using jQuery. When one of those fields gain focus, I wish to stop the animation of that field.

I’m fairly off-beat in jQuery and JS, so if anyone could point me in the right direction, I’d be sincerely grateful.

Answer 1

Check out these two jQuery plugins:

Pulse: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

Seek Attention: http://enhance.qd-creative.co.uk/demo/seekAttention/ (link now dead)

I think Pulse is what you were asking for, but Seek Attention could be useful in some cases as well.

Here is a very rudimentary sample I created using the pulse plug in.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'></script> <script src='http://enhance.qd-creative.co.uk/demos/pulse/pulse.jquery.js' type='text/javascript'></script>  <script type='text/javascript'>     function doSomething() {         if ($('.BadTextBox').val() == '') {             $('.BadTextBox').pulse({ backgroundColors: ['#fcc', '#fff'] });         }         else {             $('.BadTextBox').css({'background-color': '#fff'}).stop();         }      } </script>  <input type='text' class='BadTextBox' onblur='doSomething();' /> 

When the user navigates away from the text box it starts pulsing if empty. If they go back and fill it out, it stops pulsing.