jQuery Validation插件不验证动态创建的表单元素

Question

我有一个表单,您可以动态地添加带有输入元素的新行.在提交表单之前,可以使用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++;
}

奇迹般有效!

Answer 1

您用于向新元素添加规则的逻辑似乎没有任何重大错误. 虽然,您需要使用jQuery 选择器将.rules()方法附加到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]",等.

Answer 2

可能与以下内容重复：

1. 将jQuery验证程序规则添加到ASP中动态创建的元素中
2. jQuery-如何动态添加验证规则

长话短说，你必须打电话

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

http://validation.bassistance.de/rules

或更新

http://jqueryvalidation.org/rules

作为一个侧面说明：因为你注入大量的HTML从JS它可能是一个好主意，尝试一个模板引擎。