Плагин jQuery Validation не проверяет динамически созданные элементы формы

У меня есть форма, в которой вы динамически можете добавлять новые строки с элементами ввода. Перед отправкой моей формы он проверяется с помощью плагина отсюда 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!'
    }
});

Теперь моя реальная проблема заключается в том, что ни одно из новых полей ввода не проверяется. Я знаю, что я использую массивы ввода для упрощения обработки формы на стороне сервера. Являются ли эти массивы проблемой, почему мои поля ввода не проверяются?

EDIT - мое текущее решение:

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++;
}

Работает как шарм!

Ответ 1

Кажется, нет ничего в основном неправильного в логике, которую вы используете для добавления правил в новые элементы. Хотя вам необходимо прикрепить метод .rules() к объекту jQuery, используя селектор jQuery, а не элемент HTML.

что-то вроде...

$('#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 атрибута? Это будет одинаковым для каждого нового ряда.

Проблема заключается в том, что плагин jQuery Validate не будет работать, если каждый элемент input содержит уникального name. Просто измените свой код, чтобы новое name создавалось для каждого нового элемента.


РЕДАКТИРОВАТЬ: индексированные массивы будут хорошо работать с этим плагином. Просто увеличивайте индекс при создании нового элемента.

name="from[0]", name="from[1]", name="from[2]" и т.д.

Ответ 2

Это может быть дубликат:

Короче говоря, вам нужно позвонить

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

http://validation.bassistance.de/rules

или, обновлено,

http://jqueryvalidation.org/rules

В качестве побочного примечания: поскольку вы вставляете много HTML из JS, может быть хорошей идеей попробовать механизм шаблонов.