jquery - 动态添加验证规则

Question

我有一个插件，它通常处理用于 CRUD 操作的 jQuery 对话框的创建。添加到对话框的表单标记可在插件代码外部使用，并且插件只需请求 http 服务提供标记，并且在收到标记时只需将其添加到对话框本身。

然后，我在插件中创建了一个回调(onSetupValidation 函数)，它是插件用户自定义每个表单验证的句柄。这是我正在使用的代码示例

var element = $('#mydiv');
element.crudplugin({
    [...]
    onSetupValidation: function(markup) {
        var form = $('#myForm', markup);
        var container = $('<div class="error"><p>Errors were found validating your form. Please correct them and retry.</p><ol></ol></div>')
                       .appendTo(form).hide();
        var validator = form.validate({
            errorContainer: container,
            errorLabelContainer: $('ol', container),
            errorElement: 'em',
            wrapper: 'li',
            highlight: function (element) {
                $(element).addClass("ui-state-error");
            },
            unhighlight: function (element) {
                $(element).removeClass("ui-state-error");
            },
            submitHandler: function (form) {
                [...]
            }
        });
    }
    [...]
});

嗯。让我们来解决问题

1. 如果我在标记内添加验证规则(作为类属性)，验证根本不起作用。如果我在 validate() 方法中添加规则，则会出现相同的行为

2. 通过谷歌搜索，我发现了许多示例，特别是在 SO 上，它使用 validation plugin 的 .rules('add',rule) 方法。如以下示例所示，所有这些链接建议在添加任何规则之前调用 validate 方法，如以下示例所示

   $("#myField", markup).rules("add", { required: true });
   

但是如果我在执行指令时使用此方法，则会收到以下错误:

SCRIPT5007: Unable to get value of the property 'settings': object is null or undefined jquery.validate.min.js, line 15 character 257

有什么建议吗？

Answer 1

您绝对走在正确的道路上。

关键是，在向表单中的各个字段添加规则之前，您必须在表单上调用validate。

如果您想查看触发此情况的示例，可以查看 my answer to a previous question (或者特别是 jsfiddle )。在该 jsfiddle 中，如果您注释掉 javascript 的最后 4 行 ($('#myForm').validate({/* ... */});)，它将触发相同的错误您看到的消息。

您的问题也不清楚，但您可能在表单可见之前调用 validate ？如果是这样，很可能没有帮助......