javascript - 选择框上的 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

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

When the select box selected an empty value, the required showed "false" which inverted meant it was always optional when the required failed, so it never ran the required rule.

我用下面的代码覆盖了可选函数，如果它是必需项，则返回“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";
    };

Answer 6

您的元素中缺少name属性。就我而言，这是问题所在，因为 jQuery Validatation Plugin在验证时会select寻找namenot 。id