javascript 引导箱验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18424573/
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
Bootbox validation
提问by SBB
I am trying to create a modal using Bootbox. I have the modal popup and ask you to fill in some data. I am then trying to do validation so when they click on save, it checks to just make sure the fields are filled in.
我正在尝试使用 Bootbox 创建一个模态。我有模态弹出窗口并要求您填写一些数据。然后我尝试进行验证，因此当他们单击“保存”时，它会检查以确保填写了字段。
How can I prevent the modal from closing when clicking save if validation fails?
如果验证失败，如何在单击保存时防止模式关闭？
bootbox.dialog(header + content, [{
"label": "Save",
"class": "btn-primary",
"callback": function() {
title = $("#title").val();
description = $("#description").val();
icon = $("#icon").val();
href = $("#link").val();
newWindow = $("#newWindow").val();
type = $("#type").val();
group = $("#group").val();
if (!title){ $("#titleDiv").attr('class', 'control-group error'); } else {
addMenu(title, description, icon, href, newWindow, type, group);
}
}
}, {
"label": "Cancel",
"class": "btn",
"callback": function() {}
}]);
回答by bruchowski
I think you can just return false in your "Save" button callback
我认为您可以在“保存”按钮回调中返回 false
like this:
像这样：
bootbox.dialog(header + content, [{
"label": "Save",
"class": "btn-primary",
"callback": function() {
title = $("#title").val();
description = $("#description").val();
icon = $("#icon").val();
href = $("#link").val();
newWindow = $("#newWindow").val();
type = $("#type").val();
group = $("#group").val();
if (!title){
$("#titleDiv").attr('class', 'control-group error');
return false;
} else {
addMenu(title, description, icon, href, newWindow, type, group);
}
}
}, {
"label": "Cancel",
"class": "btn",
"callback": function() {}
}]);
回答by VDWWD
As commented by @AjeetMalviya, the solution posted by @bruchowski does not close the Bootbox when using return false;that way. The callback returns nullwhen the Cancel button is clicked and an empty string when the OK button is clicked.
正如@AjeetMalviya 所评论的那样，@bruchowski 发布的解决方案在使用return false;这种方式时不会关闭 Bootbox 。null单击取消按钮时回调返回，单击确定按钮时返回空字符串。
<script>
var bb = bootbox.prompt({
title: 'Input Required',
onEscape: true,
buttons: {
confirm: {
label: '<svg><use xlink:href="/icons.svg#check" /></svg> OK'
},
cancel: {
label: '<svg><use xlink:href="/icons.svg#x" /></svg> Cancel',
className: 'btn-secondary'
}
},
inputType: 'password',
callback: function (result) {
//result is null when Cancel is clicked
//empty when OK is clicked
if (result === null) {
return;
} else if (result === '') {
bb.find('.bootbox-input-password').addClass('input-validation-error');
return false;
}
console.log(result);
}
});
bb.init(function () {
//do stuff with the bootbox on startup here
});
</script>
