动态添加的输入字段通过验证并提交不能到另一个页面

debugcn 发表于 Dev

爱德华克

我是初学者，在动态添加的输入字段参考来自：验证动态添加的输入字段，当通过验证和提交不能到另一个页面

遵循脚本示例。

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.validate.js"></script>
<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>

当通过验证点击提交对接无法操作=“/action_page_post.php”

和 HTML 代码

<form class="commentForm" method="get" action="/action_page_post.ph">
    <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>

萨加尔 V

我所做的改变

改变on('submit')以submitbutton.onclick
添加$('.commentForm').submit();在 if 条件中，如果验证为真则执行

原因：由于您使用的是event.preventDefault()，它将阻止表单的默认行为，因此没有转到下一页。因此，您必须使用$(form).submit();
以下代码手动提交表单以下代码将在普通页面上工作，但在SO Snippet 上无效

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

        $('input.submit').click(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");
                $('.commentForm').submit();
            } else {
                console.log("does not validate");
            }
        })

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

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

   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form class="commentForm" method="get" action="action_page_post.php">
    <div>

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

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

    </div>
</form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。