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

我有一个表单，您可以动态地添加具有输入元素的新行。在提交我的表单之前，使用此处的插件http://jqueryvalidation.org/进行验证。目前用于添加新行输入元素的代码看起来是这样的：jQuery验证插件不验证动态创建的表单元素

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

就像一个魅力！

来源

2013-08-02 VitaminCpp

用于向新元素添加规则的逻辑似乎没有什么大的错误。虽然，您需要使用jQuery 选择器而不是元素的HTML将.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元素包含唯一name，jQuery Validate插件将不起作用。只需修改您的代码，以确保为每个新元素创建新的name。

来源

2013-08-02 16:55:22 Sparky

谢谢！问题解决了......看起来JQuery验证插件无法处理输入数组，因为正如您已经声明它需要唯一的名称。但是它似乎有可能附加规则，因为我已经做了**如果**附加了规则** AFTER **，您已经将一个JQuery HTML元素附加到DOM。 – VitaminCpp

它可以处理输入数组，提供你显式设置数组索引：ie）'name =“array [0]”' – FunkyMonk91