Php bootstrapValidator阻止表单提交
当我试图提交一个使用bootstrapValidator验证字段的表单时,我遇到了一个问题->它没有提交,php文件没有执行,我知道这是因为我在没有booststrapValidator的情况下尝试过,并且它可以工作。 有什么想法吗 表单如下所示:Php bootstrapValidator阻止表单提交,php,forms,block,submission,bootstrapvalidator,Php,Forms,Block,Submission,Bootstrapvalidator,当我试图提交一个使用bootstrapValidator验证字段的表单时,我遇到了一个问题->它没有提交,php文件没有执行,我知道这是因为我在没有booststrapValidator的情况下尝试过,并且它可以工作。 有什么想法吗 表单如下所示: <form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="post"> <div clas
<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="msg">Mesage</label>
<div class="col-sm-10">
<textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
</div>
</div>
<div class="form-group">
<label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send"></button>
</div>
</div>
</form>
从id=提交名称=提交和从中删除
所以完整的表格将是
<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="msg">Mesage</label>
<div class="col-sm-10">
<textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
</div>
</div>
<div class="form-group">
<label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="Send">
</button>
</div>
</div>
</form>
并且它将在验证后提交表单,验证后未提交表单的实际原因是id=提交名称=提交内部提交按钮,其中类型也是type=提交原因未知bootstrapvalidator为什么不提交表单,可能是一个bug,它可能对type=submit id=submit name=submit的输入感到困惑,所以要么删除id=submit name=submit,要么更改为其他类型,然后type=submit like id=sub name=subid和name submit是其中一个问题,另一个问题是:
$("#contactForm").submit(function(ev){
ev.preventDefault();
});
$("#sbm").on("click", function(){
var bootstrapValidator = $("#contactForm").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
//setTimeout(function(){$("#success").show();}, 300);
error = true;
$("#contactForm").submit();
else return;
});
我试图捕获验证器的返回状态并阻止表单提交。PS:我也尝试过不使用preventDefault,但没有成功,所以我删除了所有这些代码,现在它可以正常工作。删除不必要的代码,但不会有任何区别,也会发布引导验证程序代码
<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="msg">Mesage</label>
<div class="col-sm-10">
<textarea class="form-control col-sm-10" id="msg" name="msg" placeholder=""></textarea>
</div>
</div>
<div class="form-group">
<label id="captchaOperation" class="control-label col-sm-2" for="captcha"></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="captcha" name="captcha" placeholder="Answer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="Send">
</button>
</div>
</div>
</form>
$(document).ready(function(){
$('#contactForm').bootstrapValidator({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: [':disabled'],
fields: {
name: {
validators: {
notEmpty: {
message: 'The Full Name field is required'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The Email field is required'
}
}
},
msg: {
validators: {
notEmpty: {
message: 'The Message field is required'
}
}
},
captcha: {
validators: {
notEmpty: {
message: 'The Captcha field is required'
}
}
}
}
});
});
$("#contactForm").submit(function(ev){
ev.preventDefault();
});
$("#sbm").on("click", function(){
var bootstrapValidator = $("#contactForm").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
//setTimeout(function(){$("#success").show();}, 300);
error = true;
$("#contactForm").submit();
else return;
});