Форма отправки заблокирована bootstrapValidator
У меня есть проблема, когда я пытаюсь отправить форму, которая использует bootstrapValidator () для проверки полей -> она не отправляется, файл php не выполняется (я знаю это, потому что я пробовал без BooststrapValidator, и это работает).
Любая идея?
Форма выглядит так:
<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="[email protected]">
</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="submit" name="submit" а также </button> от
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send"></button>
добавлять data-toggle="validator" в <form>
<form id="contactForm" class="form-horizontal" role="form" action="contact_form.php" method="POST" data-toggle="validator">
так полная форма будет
<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="[email protected]">
</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'
}
}
}
}
});
});
и он отправит форму после проверки, форма фактической причины не будет отправлена после проверки id="submit" name="submit" внутри submit кнопка, где тип также type="submit" (Скрипка с именем & id = отправить) причина неизвестна, почему бутстрапвалидатор не отправляет форму, возможно, ошибка может быть связана с тем, что делать с вводом, где type="submit" id="submit" name="submit" так что либо убери id="submit" name="submit" (Скрипка без названия & id = отправить) или поменяй на что то другое то type="submit" лайк id="sub" name="sub" (Скрипка с именем & id = sub)
Другие решения
ID и имя «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: я пробовал и без protectDefault (), но безуспешно, поэтому я удалил весь этот код, и теперь он работает нормально.