JQuery Form Validation
<p>I need to do a form validation with jQuery. But I'm having a problem in this.</p>

<p>I have a HTML form as below: </p>

<pre><code>&lt;FORM id="formID" method="POST" onsubmit="return checkRequiredFields(this)" action=""&gt;
   &lt;td&gt;&lt;input class="required" type="text" id="input1" value="" /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input class="required" type="text" id="input2" value=""/&gt; &lt;/td&gt;
   &lt;td&gt;&lt;input class="required" type="text" id="input3" value=""/&gt; &lt;/td&gt;
   &lt;td&gt;&lt;input type="text" id="input4" value=""/&gt; &lt;/td&gt;
   &lt;td&gt;&lt;input type="submit" id="save" value="Save" /&gt;&lt;/td&gt;
&lt;/FORM&gt;
</code></pre>

<p>The first three input text fields are required fields. I tried writing the script like below: </p>

<pre><code>&lt;script type="text/javascript"&gt;
function checkRequiredFields(form){
    var no_errors = true;
    $(form).find(".required").each(function(){
        alert("Inside Loop");
           var field = $(this);
        if (field.val() == ""){
            $("#"+field ).css("color","red");
            no_errors = false;
        } else {    
            $("#"+field ).css("color","white");
        }
    });
    return no_errors;
}

&lt;/script&gt;
</code></pre>

<p>But, the above code is not working as I expected. The <code>alert()</code> is never executed, meaning that the control does not find any element with class "required". So, what is the problem in my code?</p>
