web-dev-qa-db-ja.com

動的なフォーム入力のjquery validateプラグインが機能しない

いくつかのフィールドがあるフォームがあり、必要に応じてユーザーは同じタイプのフィールドをさらに追加できます。 http://jqueryvalidation.org/ validate plugin を使用してフィールドを検証しています。

私がどこかで読んだように、jquery validateプラグインはそれらを検証するためにフィールドに一意の名前を要求します。だから私は各フィールドに一意の名前を付けています。最初に、クラスを使用してルールを追加する場合、検証プラグインが動的に追加された要素の検証を処理することを望みました。しかし、そうではないことがわかりました。

したがって、各フィールドの名前が一意であっても、検証プラグインは最初にレンダリングされた最初の入力のみを検証します。

すべてのイベントバインディングを処理することを期待して、 $。clone（） を使用してみました。しかし、私にはうまくいきませんでした。そのため、フィールド数が多いため、マークアップを繰り返すためにアンダースコアに移動しました。JSでテンプレートを作成し、それに応じて名前を付けたくありません。

私はこれに対する解決策を見つけることができず、ここで立ち往生しています。この問題が解決されるまで、これ以上続けることはできません。

これが私が書いたJSです。

$("#work_form").validate();

$(".work_emp_name").rules("add", {
    required: true
});

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#Word_exp_area").append(tpl(tplData));
    counter += 1;
});

フィドルのセットアップでマークアップを見つけてください。

ここに設定した例とコード

javascriptjqueryformsjquery-validate
15
SachinGutte

.rules()のようなこのプラグインのメソッドの1つを使用し、classのような複数の要素を対象とする場合、jQuery .each()メソッドも使用する必要があります。

_$('.work_emp_name').each(function () {
    $(this).rules("add", {
        required: true
    });
});
_

また、DOMにまだ存在しない要素に対して.rules()を使用することはできません。 .rules()メソッドを、新しい入力を作成する関数内に移動するだけです。

_$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#Word_exp_area").append(tpl(tplData));
    counter += 1;
    $('.work_emp_name').each(function () { 
        $(this).rules("add", {
            required: true
        });
    });
});
_

動作中のデモ： http://jsfiddle.net/Yy2gB/10/

ただし、すべてのフィールドを_work_emp_name_ classで指定するのではなく、1つの新しいフィールドのみをターゲットにすることにより、効率を高めることができます。

_$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#Word_exp_area").append(tpl(tplData));   // <- add new field
    $('input[name="work_emp_name['+counter+']"]').rules("add", {  // <- apply rule to new field
        required: true
    });
    counter += 1;
});
_

Working DEMO： http://jsfiddle.net/Yy2gB/11/

上記の両方の例は、動的に作成されたフィールドにルールを追加するためのものです。次のように、domで静的フィールドのルールを宣言する必要があります...

_$("#work_form").validate({
    rules: {
        "work_emp_name[0]": {
            required: true
        }
    }
});
_
35
Sparky

最初に選択した要素の検証規則を返すか、指定した規則を追加して、最初に一致した要素のすべての規則を返します。親フォームが検証される必要があります。つまり、$（“ form”）.validate（）が最初に呼び出されるか、

指定されたルールを削除し、最初に一致した要素のすべてのルールを返します。 詳細

function addRule(id){
    $("[name='work_emp_name["+id+"]']").rules("add", {
        required: true
    });
}
$("#work_form").validate();
addRule(0);

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#Word_exp_area").append(tpl(tplData));
    addRule(counter);
    counter += 1;
}); here
3
nzn

これは、jQuery Validationが現在配列の最初の出現のみを検証するためです。

プラグインで commit をチェックすると、名前付き配列が出現しても正常に機能します。

1
Saurabh Sharma