jQuery验证动态创建的数组输入元素 [英] jQuery Validate array input element which is created dynamically

问题描述

我有一个要使用 jQuery验证插件进行验证的表单.我目前对数组(name="inputname[]")的输入元素有问题，该数组是使用jQuery .on()动态创建的.让我解释一下这个问题:

I have a form which I want to validate using the jQuery Validation plugin. I currently have an issue with input element with array (name="inputname[]") which are created dynamically with jQuery .on(). Let me explain the issue:

1. 有一种形式，存在一个名为name[]的输入文本.
2. 有一个按钮可以添加更多输入文本，并且此元素使用.on()执行.我单击了2或3次，因此会有多于1个输入文本.
3. 我单击提交"，该表格已正确验证，但仅验证第一个创建的数组元素，而不验证另一个元素.

1. There is a form, with one input text exist named name[].
2. There is a button to add more input texts, and this element executed with .on(). I clicked 2 or 3 times so there will be more than 1 input texts.
3. I click submit, the form is correctly validate but it is only validate the first created array element and not the another element.

对于完整的代码，我在这里创建了一个jsfiddle: http://jsfiddle.net/ThE5K/4/

For full code I created a jsfiddle here: http://jsfiddle.net/ThE5K/4/

jQuery :

$(document).ready(function () {

    // MODE 1
    //   With [] or array name <<<< this one is not working
    $("#addInput").on('click', function () {
        $('#inputs').append($('<input class="comment" name="name[]" />'));
    });


    /* MODE 2
       Without [] or array name <<<< this one is working
       var numberIncr = 1;

        $("#addInput").on('click', function () {
           $('#inputs').append($('<input class="comment" name="name' + numberIncr + '" />'));
           numberIncr++;
       });
    */

    $('form.commentForm').on('submit', function (event) {

        $('input.comment').each(function () {
            $(this).rules("add", {
                required: true
            })
        });

        event.preventDefault();

        console.log($('form.commentForm').valid());
    })

    $('form.commentForm').validate();
});

HTML :

<form class="commentForm">
    <div id="inputs"></div>
    <input type="submit" /> 
    <span id="addInput">add element</span>
</form>

我在其中创建了两种模式，一种工作模式(不带数组名的动态输入文本)和一种不工作模式(带数组名的动态输入文本).

I create two modes inside them, the working one (dynamic input text without array name) and the not working one (dynamic input text with array name).

我一直在寻找那些解决方案，但不幸的是，其中没有一个起作用:

I have been going though those solution but unfortunately no one of them worked:

• jquery验证为数组输入添加规则
• jquery验证不适用于动态内容
• jQuery验证动态输入数组

• jquery validate add rules for an array input
• jquery validate is not working with dynamic content
• jQuery validate dynamic input array

请帮助.

推荐答案

关于用于创建新字段的代码:

Regarding your code for creating the new fields:

// Mode 1
$("#addInput").on('click', function () {
    $('#inputs').append($('<input class="comment" name="name[]" />'));
});

模式1"不起作用的全部原因是因为您已为每个新的input分配了相同的确切名称属性name="name[]". jQuery Validate插件绝对要求，每个input元素都具有 unique name属性.只需使用name[]中的numberIncr变量来确保此唯一名称.

The entire reason your "Mode 1" was not working is because you've assigned the same exact name attribute, name="name[]", to every single new input. The jQuery Validate plugin absolutely requires that every input element have a unique name attribute. Just use your numberIncr variable within name[] to ensure this unique name.

此外，您实际上不应该在submit上添加规则.通常在submit事件中检查所有规则 ，因此此时添加规则没有多大意义.创建新的输入字段时，应添加新规则.

Also, you really should not be adding rules upon submit. The submit event is normally where all the rules are checked, so adding rules at this point does not make a lot of sense. The new rules should be added when the new input fields are created.

对于您的简单情况，无论如何，rules('add')方法是过大的，您可以完全消除.on('submit')处理程序.由于规则为required，因此您可以简单地将class="required"添加到新的input元素中.

For your simple case, the rules('add') method is overkill for this anyway and you can totally eliminate your .on('submit') handler. Since the rule is required, you can simply add a class="required" to your new input elements.

这是工作代码:

jQuery :

$(document).ready(function () {

    // MODE 1
    var numberIncr = 1;
    $("#addInput").on('click', function () {
        $('#inputs').append($('<input class="comment required" name="name[' + numberIncr + ']" />'));
        numberIncr++;
    });

    $('form.commentForm').validate();
});

演示: http://jsfiddle.net/ThE5K/6/

DEMO: http://jsfiddle.net/ThE5K/6/

这篇关于jQuery验证动态创建的数组输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！