javascript 防止引导箱关闭弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30052902/
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 bootbox from closing pop-up window
提问by eatmypants
I am using bootbox to make pop-up windows with forms and I have to validate them and throw error to user if something is wrong with the form fields.
But I cannot prevent bootbox window from closing after user clicks 'Send' button. I need to show error notifications to user, so errors could be corrected and the form be sent again.
我正在使用 bootbox 制作带有表单的弹出窗口，如果表单字段有问题，我必须验证它们并向用户抛出错误。但是在用户单击“ Send”按钮后，我无法阻止引导箱窗口关闭。我需要向用户显示错误通知，以便可以更正错误并再次发送表单。
return falseworks ok, but after it I cannot find method, to restore usual method of bootbox to close the windows.
return false工作正常，但之后我找不到方法，恢复通常的引导箱方法来关闭窗口。
Does somebody faced the same problem and how you get rid of this situation?
是否有人面临同样的问题以及如何摆脱这种情况？
As asked, fsFiddle:
正如所问，fsFiddle：
<button id="test">Bootbox</button>
Code:
代码：
$(document).ready(function() {
$("#test").on('click', function() {
bootbox.dialog({
title: "This is a form in a modal.",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="name">Name</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
'<span class="help-block">Here goes your name</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
'Really awesome </label> ' +
'</div><div class="radio"> <label for="awesomeness-1"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
console.log(name + " " + answer);
}
}
}
});
});
});
回答by skirato
I am not 100% sure about what it is that you want. I understand it as: "Keep the modal open until the form is valid".
我不是 100% 确定你想要什么。我的理解是：“保持模态打开，直到表单有效”。
If this is what you need, you could proceed as such:
如果这是您需要的，您可以继续：
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
console.log(name + " " + answer);
// proceed to your validation, if your form is not valid
// the validation should return false
var formIsValid = doFormValidation();
if(!formIsValid) {
// show error messages to the user here
showFormErrors();
// prevent the modal from closing
return false;
}
}
