验证动态添加的输入字段

IT技术 javascript jquery html jquery-validate
2021-02-24 17:53:34

我已将这个jquery 验证插件用于以下表单。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script>
    $(document).ready(function(){
        $("#commentForm").validate();
    });

    function addInput() {
        var obj = document.getElementById("list").cloneNode(true);
        document.getElementById('parent').appendChild(obj);
    }
</script>

<form id="commentForm" method="get" action="">
    <p id="parent">
        <input id="list"  class="required" />
    </p>

    <input class="submit" type="submit" value="Submit"/>
    <input type="button" value="add" onClick="addInput()" />
</form>

单击添加按钮时，会动态添加新输入。但是，当提交表单时，仅验证第一个输入字段。如何验证动态添加的输入？谢谢...

6个回答

您的输入应该具有“名称”属性。您需要动态添加规则，一种选择是在表单提交时添加它们。

这是我测试过的解决方案，它有效：

<script type="text/javascript">
   $(document).ready(function() {
        var numberIncr = 1; // used to increment the name for the inputs

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

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

            // adding rules for inputs with class 'comment'
            $('input.comment').each(function() {
                $(this).rules("add", 
                    {
                        required: true
                    })
            });            

            // prevent default submit action         
            event.preventDefault();

            // test if form is valid 
            if($('form.commentForm').validate().form()) {
                console.log("validates");
            } else {
                console.log("does not validate");
            }
        })

        // set handler for addInput button click
        $("#addInput").on('click', addInput);

        // initialize the validator
        $('form.commentForm').validate();

   });


</script>

和 html 表单部分：

<form class="commentForm" method="get" action="">
    <div>

        <p id="inputs">    
            <input class="comment" name="name0" />
        </p>

    <input class="submit" type="submit" value="Submit" />
    <input type="button" value="add" id="addInput" />

    </div>
</form>

祝你好运！如果答案适合您，请批准！

+1 为动态字段的答案。我用 addInput 预先完成了它，以获得即时模糊验证，而不是等待提交。
2021-04-25 17:53:34
FWIW，您可以在 document.ready 上调用一次验证，然后在addInput函数中添加规则。如果要显示验证成功/失败，请将处理程序附加到submitHandler和invalidHandler。
2021-04-30 17:53:34
巨大的问题让我发疯...动态字段必须具有该name属性或验证将不起作用。谢谢@Angel 的回答。
2021-04-30 17:53:34
是的，这可能有效，您需要为最后添加的输入添加规则，例如 $('input.comment:last').rules('add', {}); 但我发现将所有验证部分放在同一个地方更直接。
2021-05-13 17:53:34
非常感谢@Angel 的努力。它像魔术一样工作。很棒的工作:)
2021-05-17 17:53:34

添加新字段后重置表单验证。

function resetFormValidator(formId) {
    $(formId).removeData('validator');
    $(formId).removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(formId);
}
您通常会在添加字段后在添加新字段函数中调用此函数。这样它就会找到新的字段。不确定错误。某处缺少的东西......
2021-04-26 17:53:34
这个解决方案要好得多
2021-05-02 17:53:34
当我使用它时，我收到此错误：Uncaught TypeError: Cannot read property 'parse' of undefined
2021-05-15 17:53:34
需要从哪里调用这个函数？在提交表单时，或添加新字段的 javascript 方法中？
2021-05-16 17:53:34
2021-05-16 17:53:34

添加动态内容后需要重新解析表单以验证内容

$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));

发布的一个 mahesh 不起作用，因为缺少属性名称：

所以代替 

<input id="list" class="required"  />

您可以使用： 

<input id="list" name="list" class="required"  />

修改版

jquery 验证插件版本工作正常v1.15.0但v1.17.0对我不起作用。

$(document).find('#add_patient_form').validate({
          ignore: [],
          rules:{
            'email[]':
            {
              required:true,
            },               
          },
          messages:{
            'email[]':
            {
              'required':'Required'
            },            
          },    
        });
其它你可能感兴趣的问题
上一篇在 React 中上传之前获取图像预览 下一篇javascript数组上的getter/setter？