jQuery Form validation: Radio buttons validation on blur
<p>I am trying to validate radio buttons on blur and have written a common function to validate all sets of radio buttons. </p>

<p><strong>The HTML:</strong></p>

<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;table width="100%"&gt;
&lt;tr&gt;
    &lt;td&gt;Body Type&lt;/td&gt;
    &lt;td&gt;&lt;div id="bodyType"&gt;
    &lt;input type="radio" tabindex="10" name="bodyType" value="1"&gt; Slim &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="11" name="bodyType" value="2"&gt; Average &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="12" name="bodyType" value="3"&gt; Athletic &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="13" name="bodyType" value="4"&gt; Heavy&lt;span class="form-error"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;Complexion&lt;/td&gt;
    &lt;td&gt;&lt;div id="complexion"&gt;
    &lt;input type="radio" tabindex="14" name="complexion" value="1"&gt; Very Fair &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="15" name="complexion" value="2"&gt; Fair &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="16" name="complexion" value="3"&gt; Wheatish &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="17" name="complexion" value="4"&gt; Wheatish Brown &amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="radio" tabindex="18" name="complexion" value="5"&gt; Dark &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>The jQuery:</strong></p>

<pre><code>$(document).ready(function(){

    var bodyType = $("#bodyType"),
        complexion = $("#complexion");
    bodyType.find('input').blur(validate(this));
    complexion.find('input').blur(validate(this));

    function validate(obj){
        var tagname = $("input:first", obj).attr("name");
        var arr = document.getElementsByName(tagname);
        var counter = 0;
        var check = 0;
            while(counter &lt; arr.length)
            {
                if(arr[counter].checked == true)
                {
                    check++;
                }
                counter++;
            }
            if(check &gt; 0)
            {
                $(obj).find('span').attr("class","form-ok").html('OK');
                return true
            }
            else
            {
                $(obj).find('span').attr("class","form-error").html('Choose');
                return false;
            }
    }
});
</code></pre>

<p><strong>The CSS:</strong></p>

<pre><code>.form-ok { color:green; padding-left:10px }
.form-error { color:red; padding-left:10px }
</code></pre>

<p>The same is running online at:
<a href="http://jsfiddle.net/prajan55/V9RvD/" rel="nofollow">http://jsfiddle.net/prajan55/V9RvD/</a></p>

<p>But the function executes on load itself even before blur happens. Kindly help to fix this issue.</p>
