javascript - 防止bootbox关闭弹窗

标签 javascript jquery bootbox

我正在使用 bootbox 制作带有表单的弹出窗口,我必须验证它们并在表单字段出现问题时向用户抛出错误。 但是我无法阻止引导框窗口在用户单击“发送”按钮后关闭。我需要向用户显示错误通知,以便更正错误并再次发送表单。

return false 工作正常,但之后我找不到方法来恢复 bootbox 关闭窗口的常用方法。

有人遇到过同样的问题吗?您是如何摆脱这种情况的?

根据要求,fsFiddle :

<button id="test">Bootbox</button>

代码:

$(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);
                    }
                }
            }
        });

   });
});

最佳答案

我不能 100% 确定您想要什么。我理解为:“在表单有效之前保持模式打开”。

如果这是你需要的,你可以这样进行:

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;
    }
}

关于javascript - 防止bootbox关闭弹窗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30052902/

相关文章:

javascript - Jquery使用on事件监听器获取选择器的值

javascript - Browserify 从全局范围的 require 加载依赖项,而不是期望它们被捆绑在一起

javascript - 未定义 require - 创建目录中每个文件的数组

javascript - 使用 jQuery 修改选定表格单元格的样式属性?

javascript - Bootstrap 3 默认为第一个选项卡

php - 如何定义何时应该隐藏 "Show More"按钮?

javascript - bootbox.js -> 仅当条件为 true 时才在 bootbox.dialog() 中显示按钮

javascript - 阴影 Bootstrap 框对话框

javascript - 转换为 Bootbox 确认

javascript - 与可拖动和可放置的交换不起作用