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

您用于向新元素添加规则的逻辑似乎没有什么大问题。 虽然，您需要使用 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属性？每个新行都将是相同的。

问题是 jQuery Validate 插件将无法工作，除非每个input元素都包含一个唯一的 name. 只需修改您的代码以确保name为每个新元素创建一个新元素。

编辑：索引数组将与此插件一起正常工作。只需在创建新元素时增加索引。

name="from[0]", name="from[1]",name="from[2]"等

于 2013-08-02T16:55:22.340 回答
5

它可能是以下内容的副本：

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

长话短说，你必须打电话

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

http://validation.bassistance.de/rules

或者，更新，

http://jqueryvalidation.org/rules

附带说明：由于您HTML从中注入了很多内容，JS因此尝试使用模板引擎可能是个好主意。

于 2013-08-02T16:57:09.647 回答