.NET MVC ненавязчивая валидация/проверка флажка

Я пытаюсь реализовать капчу с флажком, о которой читал здесь: http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

Однако у меня возникают проблемы с добавлением флажка с javascript на стороне клиента и ненавязчивой проверкой.

Я реализовал флажок с ненавязчивой проверкой на основе ответа Дарина Димитрова здесь: ненавязчивая проверка MVC на флажок не работает, который работает отлично.

Однако, как только я удалю флажок из своего представления и вместо этого добавлю его с этим кодом 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"));
});

он больше не хочет подтверждать. Известны ли проблемы с добавлением элементов формы после загрузки документа и ненавязчивой проверкой? Если да, кто-нибудь пытался реализовать это или есть какие-либо предложения о том, как это сделать?


asp.net-mvc-3 captcha jquery-validate unobtrusive-validation
person Greg B    schedule 01.05.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, я нашел решение.

Как я подозревал и как упоминал Спарки: плагин jQuery Validate инициализируется один раз в событии готовности DOM. Из-за этого все, что мне нужно было сделать после динамического добавления ввода, — это повторно инициализировать ненавязчивую проверку.

Я добавил это первым для правила:

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

Затем я добавил это, чтобы повторно инициализировать ненавязчивую проверку:

$("form").removeData('validator');
$("form").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($("form"));
person Greg B    schedule 01.05.2013

arrow_upward
0
arrow_downward

Цитата OP:

Однако, как только я удалю флажок из своего представления и вместо этого добавлю его с этим кодом jquery: {snip}, он больше не хочет проверять. Известны ли проблемы с добавлением элементов формы после загрузки документа и ненавязчивой проверкой? Если да, кто-нибудь пытался реализовать это или есть какие-либо предложения о том, как это сделать?

Это происходит из-за того, что подключаемый модуль jQuery Validate инициализируется один раз в событии готовности DOM, но ваш флажок еще не установлен. Это слишком распространенное заблуждение, что .validate() вызывается повторно, когда пользователь взаимодействует с формой. Нет. .validate() вызывается один раз в DOM, готовом к инициализации плагина, и проверка формы происходит автоматически при запуске событиями по умолчанию.

Если вам нужно динамически изменить HTML-код формы, вы должны использовать один из встроенных методов плагина для динамического изменения его параметров.

В вашем случае вам нужно использовать метод rules('add'), иногда < em>после того, как ваш jQuery добавит флажок, чтобы изменить параметр 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"
        }
    });

    ...

});
person Sparky    schedule 01.05.2013
comment
Спарки спасибо за ответ. Я попробовал код, и он не сработал. Я не верю, что это не работает, потому что я работаю с ненавязчивой проверкой jquery, а не только с проверкой jquery. Вы учли это в своем ответе? - person Greg B; 02.05.2013
comment
@GregB, плагин проверки Microsoft unobtrusive зависит от плагина проверки jQuery. Метод, описанный в моем ответе, является стандартным способом динамического изменения правил с помощью jQuery Validate. Поскольку вы выполняете такие настройки, нет смысла использовать unobtrusive, и вы можете просто использовать только jQuery Validate. Я видел, как многие разработчики ASP шли по этому пути в пользу большего контроля. - person Sparky; 02.05.2013