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

我有一个表单，您可以动态地添加带有输入元素的新行。 在提交表单之前，可以使用http://jqueryvalidation.org/上的插件进行validation。 目前，添加带输入元素的新行的代码如下所示：

function addTimeRow(table, stime) { //var rowIdx = $('#seminarTimes tr').length - 1; var $id = $(''); var $dateField = $(''); var $date = $('
') .append($dateField) .append(''); var $from = $(' (hh:mm)'); var $to = $(' (hh:mm)'); 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($('') .append($id) .append($('') .append($date)) .append($('') .append($from)) .append($('') .append($to)) .append($('') .append($('')))); // 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'); }); } 

在我的文档就绪事件中，我初始化JQueryvalidation插件，如下所示：

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

现在我的实际问题是，没有任何新的输入字段得到validation。 我知道我正在使用输入数组来更轻松地处理服务器端的表单。 这些数组是否导致我的输入字段无法validation的问题？

编辑 – 我目前的解决方案：

 var rowIdx = 0; function addTimeRow(table, stime) { var $id = $($.validator.format('', rowIdx)); var $dateField = $($.validator.format('', rowIdx)); var $date = $('
') .append($dateField) .append(''); var $from = $($.validator.format(' (hh:mm)', rowIdx)); var $to = $($.validator.format(' (hh:mm)', 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($('') .append($id) .append($('') .append($date)) .append($('') .append($from)) .append($('') .append($to)) .append($('') .append($('')))); // 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 = $(''); var $dateField = $(''); var $date = $('
') .append($dateField) .append(''); var $from = $(' (hh:mm)'); var $to = $(' (hh:mm)'); 

注意name属性？ 每一个新行都是一样的。

问题是除非每个input元素包含唯一 name否则jQuery Validate插件将不起作用。 只需修改代码以确保为每个新元素创建新name 。

Answer 2

它可能与以下内容重复：

1. 将jQueryvalidation器规则添加到ASP中动态创建的元素
2. jQuery – 如何动态添加validation规则

长话短说，你要打电话

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

http://validation.bassistance.de/rules

或者，更新，

http://jqueryvalidation.org/rules

作为旁注：由于您从JS注入了大量HTML ，因此尝试模板引擎可能是个好主意。