Как проверить поле выбора в 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

Answer 1

Обновлено jsfiddle: http://jsfiddle.net/A6eEh/2/

stateField содержит только значение, а не фактический элемент.Вам необходимо применить CSS к элементу

Answer 2

Проблема в том, что ваша переменная stateField содержит фактическое значение поля.Это не ссылка на само поле или объект jQuery для поля, поэтому вы не можете сказать stateField.css().

Попробуйте что-то вроде этого:

var stateField = $("#single");

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

Обновленная версия вашегоdemo: http://jsfiddle.net/A6eEh/3/

Обратите также внимание, что при возврате из вашей функции, как только вы обнаружите ошибку, ваша проверка будет сообщать только одну ошибку за раз (таким образом, проверка stateField не произойдет, если выВы ввели имя).