多 Select 自定义验证规则

Question

我正在尝试创建自定义验证规则，以确保在具有多重属性的 select 中至少生成一个 selection。我有一个 jsfiddle 显示我此时拥有的内容，但我无法触发验证规则。我已经包含了翻译 select 的 jQuery 脚本，以防万一这可能是我的问题。我的代码在 JavaScript window 底部的文档就绪部分。 jsfiddle 在这里：https://jsfiddle.net/7bkz58cy/25/

$.validator.addMethod('multiSelectRequired', function (value, element) {
    return element.length > 0;
}, 'One selection required.');

$('#activity-dialog-form').validate({
    rules: {
        FacilityList: { multiSelectRequired: true }
    }
});

我不明白为什么验证没有触发。有人可以指出我遗漏的内容吗？

Answer 1

在您的自定义验证方法中，您应该检查 value 而不是 element。

value 可以是 null（如果为空）或 array。这样你就可以检查它是否不是 null:

$.validator.addMethod('multiSelectRequired', function (value, element) {
    return value !== null;
}, 'One selection required.');

或者如果您需要多个选择，还要检查 value 数组的长度：

$.validator.addMethod('multiSelectRequired', function (value, element) {
    // minimum two options selected:
    return value !== null && value.length > 1;
}, 'Two selections required.');

接下来是 <select> 元素最初是隐藏的（用户不可见），因此它在验证过程中被跳过（默认设置）。要使隐藏字段也被验证，请添加 ignore 选项：

$('#activity-dialog-form').validate({
    ignore: [],
    rules: {
        FacilityList: { multiSelectRequired: true }
    }
});

Jsfiddle

还有一点就是定位问题。

最终的方法是将表单放在对话框中，而不是将对话框附加到此处的表单中：

open: function (type, data) {
   $(this).parent().appendTo($('#activity-dialog-form'));
   // ...

如果出于某种原因需要将其附加到表单，则应禁用对话框覆盖，因为它将位于对话框上方（因为您的表单的 z-index 低于覆盖）。

要禁用覆盖，将 modal 选项更改为 false（或删除它，因为它默认设置为 false）：

$('#activity-event-dialog').show().dialog({
    //modal: false,

Answer 2

I can't figure out why the validation isn't firing.

您的验证不起作用的原因之一是因为您在同一个表单上两次调用 .validate() 方法。您只能调用一次 .validate() 方法，因为所有后续调用都将被完全忽略。由于您的规则是在第二个实例中声明的，因此它们将被忽略。

.validate() 方法只会被调用一次，在 DOM 准备就绪时，初始化表单上的插件，并且同一实例包含任何规则、选项、回调等。

在这个最基本的示例中，我只是将 required 规则 (required="required") 放在具有 multiple="multiple" 属性的 select 元素上，验证是在没有自定义的情况下工作 rules/methods：https://jsfiddle.net/csj35fj8/

在您的代码中显示：http://jsfiddle.net/Lzmh0qtg/2/

$('#activity-dialog-form').validate({
    ignore: [],
    rules: {
        FacilityList: {
            required: true
        }
    },
    messages: {
        FacilityList: {
            required: 'One selection required.'
        }
    }
});

由于您正在使用 .multiselect() jQuery UI 小部件来动态更改 select 字段的外观，因此您无法再将其验证为原始字段select 元素现已隐藏。

您需要将 ignore 选项设置为 [] 以忽略 "nothing"，以便验证隐藏的 select。

为了在用户创建 selection 时自动隐藏验证错误消息，请使用 change 处理程序在该元素上触发 .valid() 方法。

$('.multiselect').on('change', function() {
    $(this).valid(); 
});

需要此解决方法，因为默认情况下 jQuery 验证插件仅查看 original select 元素上的事件，该元素现在是隐藏。

工作演示：http://jsfiddle.net/Lzmh0qtg/3/

多 Select 自定义验证规则

Multi Select Custom Validation Rule

jquery

jquery-ui

jquery-validate

jquery-multiselect