twitter-bootstrap 提交表单错误时防止模态关闭（jQuery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32340332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent modal from closing when error submitting the form (jQuery)
提问by Hayk Hakobyan
So basically I have a bootstrap modal with a form:
所以基本上我有一个带有表单的引导模式：
html:
html：
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- some heading here -->
</div>
<div class="modal-body">
<form class="form-partner">
<!-- some form here -->
</form>
</div>
<div class="modal-footer" style="text-align:center;">
<div id="message"></div>
<button class="btn btn-lg" type="submit" id="submit">BUTTON</button>
</div>
</div>
</div>
</div>
And a jQuery script that sends it to send.php, where the data is being checked and submitted to the server.
一个 jQuery 脚本将它发送到send.php，在那里数据被检查并提交到服务器。
js
js
$(function() {
$("#submit").click(function(){
$.ajax({
type: "POST",
url: "send.php",
data: $('form').serialize(),
success: function(msg){
$("#message").html(msg)
//$("#modal").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
I write an error message to the div#message, but I need it to close the modal whenever the submission is successful.
我向div#message写了一条错误消息，但是只要提交成功，我就需要它来关闭模式。
Is there a way to do that, like can I check the data validity (like if email is actually an email) in jQuery $.ajaxitself?
有没有办法做到这一点，比如我可以在 jQuery $.ajax本身中检查数据有效性（比如电子邮件是否实际上是电子邮件）？
回答by J Santosh
you can do this using hide.bs.modalevent. this event fired automatically when modal going to hide
你可以使用hide.bs.modal事件来做到这一点。当模态隐藏时自动触发此事件
JS
JS
$('.modal').on('hide.bs.modal', function(e) {
// Submit data to server and in success callback write if to validate whether form data is valid or not .
if(invalidForm) {
e.preventDefault();
}
});
and one more simple thing is don't provide any close buttons on modal and use below code. In below code user will not be able to close the modal. user will have only one option to enter data.
更简单的一件事是不要在模态上提供任何关闭按钮并使用下面的代码。在下面的代码中，用户将无法关闭模态。用户将只有一个选项来输入数据。
JS
JS
$('#myModal').modal({backdrop: 'static', keyboard: false})
or HTML
或 HTML
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>
backdrop: staticprevents modal close that occurs through click on screen outside modal.
keyboard:falseprevents modal close through keyboard. (generally modal can be closed using ESCkey)
backdrop: static防止通过点击模态外的屏幕发生模态关闭。
keyboard:false防止通过键盘关闭模态。（一般modal可以用ESCkey关闭）
回答by Sean Mishra
You can do the validation checks before the $.ajaxcall and write error message to the modal if any. Execute ajax only if the validation is successful.
您可以在$.ajax调用之前进行验证检查，并将错误消息写入模态（如果有）。只有验证成功才执行ajax。
$(function() {
$("#submit").click(function(e){
e.preventDefault();
var email= ....; //get user entered email;
//validate email (pseudo code)
if(email is invalid) {
//display message to div#message
}
else {
//make ajax call
$.ajax({
type: "POST",
url: "send.php",
data: $('form').serialize(),
success: function(msg){
$("#message").html(msg)
//$("#modal").modal('hide');
},
error: function(){
alert("failure");
}
});
}
});
});
If you're doing the validation on server side, then instead of returning message, you can return codes, like : 1 for success, 2 for bad email, etc. Then you can do something like this in the ajax function:-
如果您在服务器端进行验证，那么您可以返回代码，而不是返回消息，例如：1 表示成功，2 表示电子邮件错误等。然后您可以在 ajax 函数中执行以下操作：-
$.ajax({
type: "POST",
url: "send.php",
data: $('form').serialize(),
success: function(msg){
if(msg == 1) $("#modal").modal('hide');
else if(msg == 2) $("#message").html("Bad Email");
//etc...
},
error: function(){
alert("Failed to submit data");
}
});
If you can post your send.phpI might be able to give you a complete solution code.
如果您可以发布您的send.php，我也许可以为您提供完整的解决方案代码。
