3

何人かがおそらく同じ質問をしていることは知っていますが、私が持っているもので機能する解決策を見つけるのに苦労しています. 必要な数の行 (1 行に 4 つの入力ボックスがある) を追加し、使用しない場合は削除できるフォームがあります。.append() jquery 関数を使用して行を追加し、機能させています。

新しい入力ボックスを検証する方法を理解するのに苦労しています。私がやろうとしていることに対する良い解決策はありますか? ここに私のコードへのリンクがあります：

$(document).ready(function () {

var count = 1;
$('p#add_field').click(function () {

    count += 1;

    $('table#entries').append(
        '<tr>' +
        '<td><input id="cl_' + count + '" name="cl[]' + '" type="text" /></td>' +
        '<td><input id="num_' + count + '" name="num[]' + '" type="text" size="5"/></td>' +
        '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' +
        '<td><span class="delete">Remove</span></td></tr>');

    $(".delete").click(function () {
        $(this).closest('tr').remove();
    });

});





    // 1. prepare the validation rules and messages.
    var rules = {

        email: {
            required: true,
            email: true
        },
        lname: "required",
        fname: "required",
        city: "required",
        address: "required",
        'cl[]': "required",
        'num[]': "required",
        'description[]': "required",
        age: {
            required: true,
            number: true,
            maxlength: 3
        },
        phone: {
            required: true,
            phoneUS: true
        }



    }; // end var rules


    // 2. Initiate the validator
    var validator
        = new jQueryValidatorWrapper("FormToValidate",
            rules);

    // 3. Set the click event to do the validation
    $("#btnValidate").click(function () {
        if (!validator.validate())
            return;

        alert("Validation Success!");
    });
});

http://jsfiddle.net/9k7ph/4/

4

1 に答える 1

3

.validate()1）ハンドラー内で呼び出してclickいるため、フォームで適切に初期化されていません。フォームでプラグインを初期化する準備ができている DOMで一度だけ呼び出します。

2) 送信ボタンをクリック ハンドラー内に配置する必要もありません。jQuery Validate プラグインは、すでにclickイベントを適切にキャプチャしています。

3) 動的に作成されたフィールドには一意のname属性が必要です。そうしないと、プラグインが失敗します。

4) 新しく作成されたフィールドにルールを動的に追加する必要があります。呼び出し.validate()はこれを行う方法ではありません...新しいルール/オプションは初期化後に無視されます。のような組み込みメソッドを使用するrules('add')か、さらに簡単にclass="required"新しい入力フィールドに追加すると、このルールが自動的に選択されます。

私はあなたのフィドルを破棄し、ゼロから始めました...基本的な検証が機能しているため、他のプラグインをレイヤーに戻すことができます。

デモ: http://jsfiddle.net/X5EvD/

$(document).ready(function () {

    $("#FormToValidate").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            lname: "required",
            fname: "required",
            city: "required",
            address: "required",
                'cl[]': "required",
                'num[]': "required",
                'description[]': "required",
            age: {
                required: true,
                number: true,
                maxlength: 3
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },
        submitHandler: function (form) {
            alert("Validation Success!");
            return false; // if you need to block normal submit because you used ajax
        }
    });

    var count = 1;
    $('p#add_field').click(function () {

        count += 1;

        $('table#entries').append(
            '<tr>' +
            '<td><input id="cl_' + count + '" name="cl[' + count + ']' + '" type="text" class="required"/></td>' +
            '<td><input id="num_' + count + '" name="num[' + count + ']' + '" type="text" size="5" class="required"/></td>' +
            '<td><input id="description_' + count + '" name="description[' + count + ']' + '" type="text" size="86" class="required"/></td>' +
            '<td><span class="delete">Remove</span></td></tr>');


        $(".delete").click(function () {
            $(this).closest('tr').remove();
        });

    });

});
于 2013-03-25T23:10:27.353 に答える