Question

我正在尝试创建自定义验证规则，以确保在具有multiple属性的select中至少进行一次选择。我有一个jsfiddle显示我现在拥有的东西，但我无法启动验证规则。我已经包含了正在翻译选择的jQuery脚本，以防万一这可能是我的问题。我的代码位于JavaScript窗口底部的文档就绪部分。 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

我无法弄清楚为什么验证没有解雇。

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

只有在{DOM>准备好的，选项，回调等。

在这个最基本的示例中，我只是将.validate()规则（required）放在required="required"元素上，并带有select属性，验证工作正常自定义规则/方法：https://jsfiddle.net/csj35fj8/

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

multiple="multiple"

由于您正在使用$('#activity-dialog-form').validate({ ignore: [], rules: { FacilityList: { required: true } }, messages: { FacilityList: { required: 'One selection required.' } } }); jQuery UI小部件动态更改选择字段的外观，因此您无法再对其进行验证，因为现在隐藏了原始.multiselect()元素。

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

为了在用户做出选择时自动隐藏验证错误消息，请使用select处理程序在此元素上触发change方法。

.valid()

此解决方法是必需的，因为默认情况下，jQuery Validate插件仅查看原始 $('.multiselect').on('change', function() { $(this).valid(); });元素上的事件，该元素现在已隐藏。

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

多选自定义验证规则

2 个答案: