jqueryで選択フィールドを検証する方法は？

Question

私はこのコードを持っている：

<form action="" id="credentials" method="post"> 
<label for="name" id="nameLabel" >Name*:</label> 
<input type="text" name="name" id="name" value="" /> 
<select id="single"> 
    <option value="0">Single</option> 
    <option value="1">Single2</option> 
</select> 
<input type="submit" value="Submit" name="" data-inline="true"/> 
</form> 

そして、私はこのような検証しようとしています：

$("#credentials").submit(function(e) { 
    var nameField = $("input#name").filter(function() { 
     return !$.trim(this.value).length; 
    }); 

    if (nameField.length) { 
     nameField.css("border", "1px solid red"); 
     alert("Name is missing!"); 

     return false; 
    } 

    var stateField = $("#single").val(); 

    if (stateField == 0) { 
     stateField.css("border", "1px solid red"); 
     alert("State is missing!"); 
     return false; 
    } 
}); 

入力が正常に動作しますが、選択されていませんが。何か案は？ここをクリックJSFiddle example

Answer 1

問題は、stateField変数がフィールドの実際の値を保持しているということです。フィールド自体またはフィールドのjQueryオブジェクトへの参照ではないので、stateField.css()と言うことはできません。

このような何か試してみてください：

var stateField = $("#single"); 

if (stateField.val() == 0) { 
    stateField.css("border", "1px solid red"); 
    alert("State is missing!"); 
    return false; 
} 

あなたのデモの更新されたバージョン：http://jsfiddle.net/A6eEh/3/

も注意しているとすぐに、あなたの検証がしかつのエラーを報告しますエラーを見つけると、あなたの関数から返すことを一度に（stateFieldの名前が入力されていなければ、検証は行われません）。

Answer 2

更新jsfiddle：http://jsfiddle.net/A6eEh/2/

stateFieldは唯一の値ではない、実際の要素を保持しています。要素にCSSを適用する必要があります