在下面的代码中，您可以看到我在提交表单时调用了一个函数，名称为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。现在，您可以在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事件。所以，除了return false，我还能做些什么来防止表单提交
bootstrapValidator有它自己的提交处理程序，你验证了两次。
完全移除validate_mainform()是无用的。删除onsubmit="return validate_mainform(); "这是错误的方式来验证插件。
<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');
}
});
设置表单的action为action="javascript:return;"这将禁用自动提交表单。
<form id="mainForm" method="POST" action="javascript:return;" class="form-horizontal" role="form" onsubmit="return validate_mainform();">