jquery on input blur show / hide class
<p>I am currently building an html form and using jquery to validate.</p>

<p>Each input field is set up like this:</p>

<pre><code>&lt;div class="controls"&gt;
    &lt;input type="text" class="input-xlarge" name="name" id="name"&gt;
    &lt;div class="info"&gt;&amp;nbsp;&lt;/div&gt;
    &lt;div class="valid" style="display:none;"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my jquery so far:</p>

<pre><code>$('.controls input').blur(function() {                   
    if( !$(this).val() ) {                    
        $(this).css('border-color','red');
        $(this).find('.info').css('display','none');
        $(this).find('.error').css('display','inline-block');
</code></pre>

<p>The idea is when the user view the form, the info div shows. If they proceed with the form tabbing through the inputs without enetering any information, the error class will show and remove the info class.</p>

<p>Any ideas on where im going wrong?</p>

<p>Cheers, Dan</p>
