JQueryフォームの検証

Question

jQueryを使用してフォームの検証を行う必要があります。しかし、私はこれに問題があります。

私は以下のようにHTMLフォームを持っている：

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

最初の三つの入力テキストフィールドは必須フィールドです。私は以下のようなスクリプトを書こうとしました：

<script type="text/javascript"> 
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; 
} 

</script> 

しかし、上記のコードは期待通りに機能しません。 alert()は決して実行されません。つまり、コントロールが "必須"クラスの要素を見つけられません。だから、私のコードの問題は何ですか？

Answer 1

$("#"+field).css("color","red");は正しくありません。 fieldは文字列ではないオブジェクトですが、既にjQueryオブジェクトなので、これを行うことができます：field.css("color","red");。あなたも他の.css()コールのためにそれを行う必要があるでしょう：$("#"+field).css("color","white"); =ここ

field.css("color","white");はデモです>：右を考えるとhttp://jsfiddle.net/eehV6/