1

我正在尝试实现我在这里读到的复选框验证码：http: //uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

但是，我在使用客户端 javascript 和不显眼的验证添加复选框时遇到问题。

我根据 Darin Dimitrov 在此处的回答实现了一个带有不显眼验证的复选框：MVC unobtrusive validation on checkbox not working which works perfect。

但是，一旦我从视图中删除了该复选框并使用此 jquery 代码添加它：

jQuery(document).ready(function (jQuery) {
    $('div.test').append($("<input>").attr("id", "AcceptsTerms")
                                     .attr("type", "checkbox")
                                     .val("true")
                                     .attr("name", "AcceptsTerms")
                                     .attr("data-val-required", "This field is required.")
                                     .attr("data-val-mustbetrue", "You must accept the terms and conditions")
                                     .attr("data-val", "true")
                                     .addClass("input-validation-error"));

    $('div.test').append($('<input>').attr("type", "hidden")
                                     .val("value", "false")
                                     .attr("name", "AcceptsTerms"));

    $('div.test').append($("<label>").attr("for", "AcceptsTerms")
                                     .html("Accept terms and conditions"));

    $('div.test').append($('<span>').addClass("field-validation-error")
                                    .attr("data-valmsg-replace", "true")
                                    .attr("data-valmsg-for", "AcceptsTerms"));
});

它不再想要验证。在文档加载和不显眼的验证后添加表单元素是否存在任何已知问题？如果是这样，是否有任何尝试实施此操作或对如何进行此操作有任何建议？

4

2 回答 2

1

看起来我找到了解决方案。

正如我所怀疑和 Sparky 提到的：jQuery Validate 插件在 DOM 就绪事件上被初始化一次。因此，在动态添加输入后，我所要做的就是重新初始化不显眼的验证。

我首先为规则添加了这个：

$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");

然后我添加了这个来重新初始化不显眼的验证：

$("form").removeData('validator');
$("form").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($("form"));
于 2013-05-01T21:06:54.320 回答
0

引用操作：

但是，一旦我从我的视图中删除该复选框并使用此 jquery 代码添加它：{snip} 它不再想要验证。在文档加载和不显眼的验证后添加表单元素是否存在任何已知问题？如果是这样，是否有任何尝试实施此操作或对如何进行此操作有任何建议？

发生这种情况是因为 jQuery Validate 插件在 DOM 就绪事件上初始化一次，但您的复选框尚不存在。这是一个非常常见的误解，.validate()在用户与表单交互时会被重复调用。它不是。 在准备初始化.validate()插件的 DOM 上调用一次，并且在由默认事件触发时会自动进行表单验证。

如果您需要动态更改表单的 HTML，则必须使用插件的内置方法之一来动态更改其选项。

在您的情况下，您需要在jQuery 添加复选框后的某个时间使用rules('add')方法来更改应用复选框规则的选项。rules

$(document).ready(function() {

    $('div.test').append($("<input>").attr("id", "AcceptsTerms"). ... );

    $('#AcceptsTerms').rules('add', {
        required: true,
        another_rule: parameter,
        messages: { // <- this item is optional
            required: "custom message"
            another_rule: "custom message for this rule"
        }
    });

    ...

});
于 2013-05-01T20:26:45.870 回答