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应用于元素

如何验证jquery中的选择字段？

2 个答案: