1

ここで読んだチェックボックスキャプチャを実装しようとしています: http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

ただし、クライアント側の JavaScript と目立たない検証でチェックボックスを追加する際に問題が発生しています。

ここでの Darin Dimitrov の回答に基づいて、目立たない検証を使用してチェックボックスを実装しました。

ただし、ビューからチェックボックスを削除し、代わりにこの 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 ready event で一度初期化されます。このため、入力を動的に追加した後にしなければならなかったのは、目立たない検証を再初期化することだけでした。

私はルールのためにこれを最初に追加しました：

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

次に、控えめな検証を再初期化するためにこれを追加しました。

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

引用OP:

ただし、ビューからチェックボックスを削除し、代わりにこの jquery コードを追加すると、{snip} は検証する必要がなくなります。ドキュメントが読み込まれた後にフォーム要素を追加することと控えめな検証に関する既知の問題はありますか? もしそうなら、これを実装しようとした人はいますか、またはこれについての提案はありますか?

これは、jQuery Validate プラグインがDOM 準備完了イベントで一度初期化されるが、チェックボックスがまだ存在しないために発生します。.validate()これは、ユーザーがフォームを操作するときに繰り返し呼び出される、非常に一般的な誤解です。そうではない。 プラグインを初期化する準備が整った DOM で一度.validate()呼び出され、デフォルトのイベントによってトリガーされると、フォームの検証が自動的に行われます。

フォームの 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 に答える