0

我正在尝试创建一个自定义验证规则，以确保在具有多个属性的选择中至少做出一个选择。我有一个 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 }
    }
});

我无法弄清楚为什么验证没有触发。有人可以指出我缺少什么。

4

2 回答 2

0

我无法弄清楚为什么验证没有触发。

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

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

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

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

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

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

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

为了在用户进行选择时自动隐藏验证错误消息，请使用change处理程序触发.valid()此元素上的方法。

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

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

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

于 2015-03-22T15:33:07.843 回答
0

在您的自定义验证方法中，您应该检查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 }
    }
});

提琴手

另一件事是你有定位问题。

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

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

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

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

$('#activity-event-dialog').show().dialog({
    //modal: false,
于 2015-03-22T07:26:45.500 回答