Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent bootbox from closing pop-up window

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

   });
});
like image 447
iwazovsky Avatar asked May 05 '15 12:05

iwazovsky


People also ask

How do I remove the delete button from Bootbox confirmation?

The solution, which uses closeButton: false , is seen in the snippet below: bootbox. dialog({ closeButton: false, title: "Woah this acts like an alert", message: "Cool info for you. You MUST click Ok.", buttons: { success:{ label: "Ok", callback: callback } } }); callback(){//stuff that happens when they click Ok.}

How do I close Bootbox dialog?

Pressing the ESC key or clicking close () dismisses the dialog and invokes the callback as if the user had clicked the Cancel button. Prompt dialogs require a callback function.

What is Bootbox?

js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing, or removing any of the required DOM elements or JavaScript event handlers. npm i bootbox • cdnjs.


1 Answers

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;
    }
}
like image 94
skirato Avatar answered Oct 15 '22 18:10

skirato