Question

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

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

我根据Darin Dimitrov的回答实现了一个不显眼的验证复选框：MVC unobtrusive validation on checkbox not working完美无缺。

但是，一旦我从我的视图中删除了该复选框，并使用此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"));
});

它不再想要验证。在文档加载和不引人注意的验证后添加表单元素是否存在任何已知问题？如果是这样，有没有尝试实现这个或有任何建议如何去做？

Answer 1

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

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

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

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

然后我添加了这个来重新初始化不引人注目的验证：

$("form").removeData('validator');
$("form").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($("form"));

Answer 2

引用OP：

但是，一旦我从我的视图中删除了复选框并将其添加到此视图中 jquery代码：{snip}它不再想要验证。在那儿在文档之后添加表单元素的任何已知问题加载和不引人注意的验证？如果是这样，有任何尝试实施这个或有任何关于如何解决这个问题的建议？

这是因为jQuery Validate插件在DOM ready事件上初始化一次，但您的复选框尚不存在。当用户与表单交互时，.validate()被反复调用，这是一种非常普遍的误解。它不是。 .validate()在DOM上被称为一次，准备好初始化插件，并且在默认事件触发时会自动进行表单验证。

如果您需要动态更改表单的HTML，则必须使用其中一个plugin's built-in methods来动态更改其选项。

在您的情况下，您需要使用rules('add') method，有时在之后添加复选框，以更改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"
        }
    });

    ...

});

.NET MVC不显眼的验证/复选框验证码

2 个答案: