comment valider un champ select dans jquery?

Question

Je possède ce code:

<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> 

Et je suis en train de valider comme ceci:

$("#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; 
    } 
}); 

L'entrée fonctionne bien, mais pas la sélection. Des idées? Voici un JSFiddle example

Answer 1

Le problème est que votre variable stateField contient la valeur réelle du champ. Ce n'est pas une référence au champ lui-même ou un objet jQuery pour le champ de sorte que vous ne pouvez pas dire stateField.css().

Essayez quelque chose comme ceci:

var stateField = $("#single"); 

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

Version mise à jour de votre démo: http://jsfiddle.net/A6eEh/3/

Notez également que, en retour de votre fonction dès que vous constatez une erreur de votre validation ne jamais signaler une erreur à la fois (donc la validation stateField ne se produira pas à moins que vous n'ayez entré un nom).

Answer 2

Mise à jour jsFiddle: http://jsfiddle.net/A6eEh/2/

stateField ne se tient pas la valeur réelle de l'élément. Vous devez appliquer le CSS à l'élément