选择框上的jQuery验证不起作用

Question

我正在使用 jQuery 验证插件进行客户端验证，但我的验证在我的选择框上不起作用。

HTML

<select id="select" class="required">
    <option value="-1">Choose</option>
    <option value="child">test2</option>
</select>

JavaScript

$("#formid").validate({
    select: {
        required: function(element) {
            if ($("#select").val() == '-1') {
                return false;
            } else {
                return true;
            }
        }
    }
}); 

我如何让这个工作？

Answer 1

解决此问题的一种简单方法是为无效option赋予""值。 然后只需调用您的表单上的验证， "Choose"时不会提交。

HTML

<form id="formid">
    <select name="select" class="required">
        <option value="">Choose</option>
        <option value="child">test2</option>
    </select>

    <input type="submit" />
</form>​

JavaScript

$("#formid").validate(); ​

演示

Answer 2

尽管这可能适用于上述某些方法，但如果您希望使用自定义验证功能，则应使用此处记录的 addMethod： http : //docs.jquery.com/Plugins/Validation/Validator/addMethod

所以你会首先通过类似的东西添加方法

$.validator.addMethod("requiredSelect", function(element) {
                return ( $("#select").val() !='-1' );
            }, "You must select an option.");

然后简单地分配验证器

$("#formid").validate({
  rules: {
    select: { requiredSelect : true }
  }
});

Answer 3

代替：

$("#select").val()

尝试：

$("#select :selected").val()

$("#select").val()返回所有选项值而不是选定的值。

在这里，我的假设是您想在验证控制report-crime时检查用户是否选择了选项 -1。

Answer 4

默认情况下

<option value="">Choose</option>

与

required: true

Answer 5

您的select元素中缺少name属性。 在我的情况下，这是问题，因为 jQuery 验证插件在验证时查找name而不是id 。

Answer 6

由于某种原因，没有提供的解决方案在我的情况下有效，它归结为 jQuery Validate 调用下拉值的“可选”检查，这称为 !required 规则。

选择框选择空值时，所需的“假”倒置意味着当所需失败时始终可选，因此它永远不会运行所需规则。

我用下面的内容覆盖了可选功能，如果它是必需项，则在可选功能上返回“False”：

// Get Select to work
    $.validator.prototype.optional = function (element) {
        var val = this.elementValue(element);

        // Custom logic to get Select to show validate when value is empty
        if (element.nodeName.toLowerCase() === "select") {
            if (element.hasAttribute("data-val-required") || element.hasAttribute("required")) {
                return false;
            }
        }

        return !$.validator.methods.required.call(this, val, element) && "dependency-mismatch";
    };