Question

在下面的代码中，您可以看到我在提交表单时调用了一个函数，名称为validate_mainform（）。我已经检查了我的应用程序，甚至通过重命名它只调用一次的函数。但如果我发出警报，警报会显示两次。

经过大量调试后，我发现问题存在于下面的代码中。

Bootstrap_validate.php

 <script type="text/javascript">
    $('#mainForm').bootstrapValidator({
        live: 'enabled',
        fields: {
            reg_date: {
                group: '.col-sm-3',
                validators: {
                    notEmpty: {
                        message: 'Please enter the Registration Date'
                    }
                }
            },
            proj_name: {
                group: '.col-sm-10',
                validators: {
                    notEmpty: {
                        message: 'Please enter the Project Name'
                    }
                }
            }

        }
    });
</script>

如果我注释掉上面调用bootstrap验证器，那么该函数调用一次。

以下是我的表单和函数的代码。

project_reg.php

    <form id="mainForm" method="POST" action="" class="form-horizontal" role="form" onsubmit="return validate_mainform();">
        <div class="form-group text-center">
                <input type="submit" value="Submit" class="btn btn-info" name="submit_button" id="btn_submit_id"/>
                <input type="submit" value="Save" class="btn btn-info" name="save_button" id="btn_save"/></br>
                <br />
                <p><strong><a href="https://arecontvision.wufoo.com/forms/report-a-problem/" target="_blank">Report a Problem</a></strong></p>
        </div>
    </form>
    <?php require_once('Bootstrap_validate.php'); ?>

最后我的函数调用提交

validate_mainform（）

    function validate_mainform() {
        if ($('#mainForm').length > 0) {
            alert('Here coming twice');
                if($('input#btn_submit_id').attr('clicked')) {
                    return get_validate_output();
                } else {
                    return true;
                }
        } else {
            return get_validate_output();
        }
    }

修改

我从onsubmit中删除了validate_mainform调用，并添加了onclick of save。现在你可以在validate_mainform（）里面看到我正在调用另一个函数get_validate_output（）。如果函数返回false，那么我需要阻止表单提交。你能告诉我怎么做吗？

 function get_validate_output() {
    var output =  get_result();
    if (output == PRODUCT_VALID.AT_LEAST_ONE) {
        $('.itemidclass').addClass('error-product');
        $('.at-least-one').text('Please Add at Least One Product');
        return false;
    } else if (output == PRODUCT_VALID.ALL_VALID) {
        return false;
    } else {
        if ($('.itemidclass').hasClass('error-product')) {
            $('.itemidclass').removeClass('error-product');
            $('.at-least-one').hide();
        }
        return true;
    }
}

返回false现在不起作用。因为我现在打电话给onclick事件。因此，我可以采取其他措施来阻止表单提交。

Answer 1

bootstrapValidator拥有自己的提交处理程序，您要验证两次。

完全删除validate_mainform()它没用。删除onsubmit="return validate_mainform();＆＃34;这是使用插件验证的错误方法。

您的表单应该有1个提交按钮：

<button class="btn btn-default" type="submit"> Validate </button>

单击此按钮时，BootstrapValidator将处理您可以使用success.form.bv来捕获事件的验证。

 $('#mainForm').bootstrapValidator({
        live: 'enabled',
        fields: {
            reg_date: {
                group: '.col-sm-3',
                validators: {
                    notEmpty: {
                        message: 'Please enter the Registration Date'
                    }
                }
            },
            proj_name: {
                group: '.col-sm-10',
                validators: {
                    notEmpty: {
                        message: 'Please enter the Project Name'
                    }
                }
            }

        }).on('success.form.bv',function(e)
         {
        e.preventDefault();
        console.log('im ready to submit');
         }

    });

Answer 2

将表单操作设置为action =＆＃34; javascript：return;＆＃34;。这将禁用自动表单提交。

 <form id="mainForm" method="POST" action="javascript:return;" class="form-horizontal" role="form" onsubmit="return validate_mainform();">

我的表单提交两次。一次在onsubmit事件期间，再次当bootstrap验证器调用

2 个答案: