javascript - Prevent bootbox from closing pop-up window - Stack Overflow

admin管理员组

文章数量:1201785

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.

return false works ok, but after it I cannot find method, to restore usual method of bootbox to close the windows.

Does somebody faced the same problem and how you get rid of this situation?

As asked, 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);
                    }
                }
            }
        });

   });
});

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.

return false works ok, but after it I cannot find method, to restore usual method of bootbox to close the windows.

Does somebody faced the same problem and how you get rid of this situation?

As asked, 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);
                    }
                }
            }
        });

   });
});

• javascript
• jquery
• bootbox

Share Improve this question Follow edited May 7, 2015 at 4:43 Tieson T. 21.2k66 gold badges8080 silver badges9696 bronze badges asked May 5, 2015 at 12:25 iwazovskyiwazovsky 1,92733 gold badges2121 silver badges3737 bronze badges 1

• It's normally useful to also include the sample code in the question itself, both for completeness. and to protect against the eventual link rot that sets in. – Tieson T. Commented May 7, 2015 at 4:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 24

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".

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

本文标签： javascriptPrevent bootbox from closing popup windowStack Overflow