14

入力要素を使用して新しい行を動的に追加できるフォームがあります。フォームを送信する前に、ここhttp://jqueryvalidation.org/のプラグインを使用して検証されます。現在、入力要素を含む新しい行を追加するコードは次のようになります。

function addTimeRow(table, stime)
{
    //var rowIdx = $('#seminarTimes tr').length - 1;

    var $id = $('<input type="hidden" name="stid[]">');
    var $dateField = $('<input type="text" name="date[]" class="input-mini">');
    var $date = $('<div class="input-append date">')
        .append($dateField)
        .append('<span class="add-on"><i class="icon-calendar">');
    var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>');
    var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>');

    if (typeof(stime) !== 'undefined')
    {
        $id.attr('value', stime.id);
        $dateField.attr('value', stime.date);
        $from.attr('value', stime.from);
        $to.attr('value', stime.to);
    }
    else
        $id.attr('value', -1);

    // Attach new input row.
    table
        .append($('<tr>')
            .append($id)
            .append($('<td>')
                .append($date))
            .append($('<td>')
                .append($from))
            .append($('<td>')
                .append($to))
            .append($('<td class="vert">')
                .append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">'))));

    // Attach rules.
    $dateField.rules('add', { required: true });
    $from.rules('add', { required: true });
    $to.rules('add', { required: true });

    // Create pickers.
    $date.datepicker({
        language: 'de',
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
    }).on('changeDate', function(e) {
        editSeminarFormValidator.element($dateField);
        $date.datepicker('hide');
    });
}

ドキュメント準備完了イベントで、次のように JQuery 検証プラグインを初期化します。

var validator = $('#editSeminarForm').validate({
    debug: true,
    errorLabelContainer: '#error-label',
    wrapper: 'li',
    messages: {
        price: 'Bitte geben Sie einen Preis ein!'
    }
});

私の実際の問題は、新しい入力フィールドが検証されないことです。サーバー側でフォームを簡単に処理するために、入力配列を使用していることはわかっています。入力フィールドが検証されないのは、これらの配列の問題ですか?

編集 - 私の現在の解決策:

var rowIdx = 0;
function addTimeRow(table, stime)
{
    var $id = $($.validator.format('<input type="hidden" id="stid{0}" name="stid[{0}]">', rowIdx));
    var $dateField = $($.validator.format('<input type="text" id="date{0}" name="date[{0}]" class="input-mini">', rowIdx));
    var $date = $('<div class="input-append date">')
        .append($dateField)
        .append('<span class="add-on"><i class="icon-calendar">');
    var $from = $($.validator.format('<input type="text" id="from{0}" name="from[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx));
    var $to = $($.validator.format('<input type="text" id="to{0}" name="to[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx));

    if (typeof(stime) !== 'undefined')
    {
        $id.attr('value', stime.id);
        $dateField.attr('value', stime.date);
        $from.attr('value', stime.from);
        $to.attr('value', stime.to);
    }
    else
        $id.attr('value', -1);

    // Attach new input row.
    table
        .append($('<tr>')
            .append($id)
            .append($('<td>')
                .append($date))
            .append($('<td>')
                .append($from))
            .append($('<td>')
                .append($to))
            .append($('<td class="vert">')
                .append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">'))));

    // Attach rules.
    $dateField.rules('add', { required: true });
    $from.rules('add', { required: true });
    $to.rules('add', { required: true });

    // Create pickers.
    $date.datepicker({
        language: 'de',
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
    }).on('changeDate', function(e) {
        editSeminarFormValidator.element($dateField);
        $date.datepicker('hide');
    });

    rowIdx++;
}

魔法のように動作します！

4

2 に答える 2

18

新しい要素にルールを追加するために使用しているロジックに大きな問題はないようです。 ただし、要素の HTML ではなく、jQueryセレクター.rules()を使用してメソッドを jQueryオブジェクトにアタッチする必要があります。

何かのようなもの...

$('#myInputID').rules('add', {...});

また...

$('input[name="myname"]').rules('add', {...});

しかし、あなたの問題の核心はここにあります...

var $id = $('<input type="hidden" name="stid[]">');
    var $dateField = $('<input type="text" name="date[]" class="input-mini">');
    var $date = $('<div class="input-append date">')
        .append($dateField)
        .append('<span class="add-on"><i class="icon-calendar">');
    var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>');
    var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>');

name属性に注意してください。新しい行ごとに同じになります。

input問題は、各要素に固有 の が含まれていないと、jQuery Validate プラグインが機能しないことnameです。name新しい要素ごとに新しい要素が作成されるように、コードを変更するだけです。

編集: インデックス付き配列は、このプラグインで正常に動作します。新しい要素を作成するときにインデックスをインクリメントするだけです。

name="from[0]"、name="from[1]"、name="from[2]"など

于 2013-08-02T16:55:22.340 に答える
5

次の重複である可能性があります。

  1. ASP で動的に作成された要素に jQuery バリデータ ルールを追加する
  2. jQuery - 検証ルールを動的に追加する方法

簡単に言えば、電話する必要があります

$('input').rules('add', 'required')

http://validation.bassistance.de/rules

または、更新された、

http://jqueryvalidation.org/rules

余談ですが、大量のHTMLfromを注入するJSので、テンプレート エンジンを試すのは良い考えかもしれません。

于 2013-08-02T16:57:09.647 に答える