首页 文章

防止bootbox关闭弹出窗口

提问于
浏览
9

我正在使用bootbox制作带有表单的弹出窗口,如果表单字段有问题,我必须验证它们并向用户抛出错误 . 但是,在用户单击“ Send ”按钮后,我无法阻止启动箱窗口关闭 . 我需要向用户显示错误通知,因此可以纠正错误并再次发送表单 .

return false 工作正常,但之后我找不到方法,恢复通常的bootbox方法来关闭windows .

有人遇到同样的问题,你是如何摆脱这种情况的?

如上所述,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);
                    }
                }
            }
        });

   });
});

1 回答

  • 17

    我不是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;
        }
    }
    

相关问题