Add border to all required elements, but scroll top to the first empty element
<p>In my form, I've added a class named <code>required</code> to all elements that cannot be empty. Then I'm looping through each element using <code>$.each()</code> and adding a class named <code>border</code> which will apply a 2px red border to all those elements.</p>

<pre><code>var req = $('.required');
$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
    }
});
</code></pre>

<p>Now there is vertical scrolling on the page and so when submit is clicked I want the page to scroll up to the first empty element so that the user will know something is wrong and that is the reason the form did not submit</p>

<h3><strong>WHAT I TRIED</strong></h3>

<p>I added this block in my earlier version of code</p>

<pre><code>$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
      $('html, body').animate({            // added for scrolling purposes
         scrollTop: $(this).offset().top
      }, 200);
    }
});
</code></pre>

<p>This works, but the problem is that it will keep scrolling at every 0.2 sec interval till it reaches the last empty element. This looks very funny and undesirable to the user.</p>

<p>So I was wondering if there is way to make it to scroll to the first empty element is occurs and stop there even if there are more empty elements below it. When that is filled and submit is clicked again, scroll to the first empty element again and stop it right there.</p>

<h2><strong>JS Fiddle</strong></h2>

<p>Here is a JS Fiddle to get you started and to also give an idea about the funny behavior that I'm referring to. Notice how it keeps scrolling till it reaches the last element.</p>

<p><a href="http://jsfiddle.net/qpbVg/" rel="nofollow"><strong>JS DEMO</strong></a></p>
