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的值设置为无效""。然后只需在表单上调用validate，并且在选择"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();

<强> Demo

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

您的name元素中有缺少select 属性。就我而言，这就是问题所在，因为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";
    };

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

6 个答案: