Search code examples
jquerytwitter-bootstraptwitter-bootstrap-3bootbox

bootbox.prompt() Confirm form submission using


I want to prevent form submission if someone enter wrong text in textbox. I want to user enter only done then submit form otherwise show a error message. In my below code not working its not prevent form from submission.

$('#delete_btn').click(function(event) {
        event.preventDefault();
        bootbox.prompt("Are you sure you want to done the record?<br/>Write 'done' below to confirm!", function(result) {
            if(result !== null)
                result = result.toLowerCase();
            if(result === 'done') {
            } else {
                alert('please enter something in textbox');
            }
        });
    });

Solution

  • If you want the dialog to stay open, add a return false to the callback, ergo:

    $('#delete_btn').click(function(event) {
        event.preventDefault();
    
        bootbox.prompt("Are you sure you want to done the record?<br/>Write 'done' below to confirm!", function(result) {
            if(result !== null){
                result = result.toLowerCase();
    
                if(result === 'done') {
                    /* submit your form */
                } else {
                    alert('please enter something in textbox');
    
                    return false;
                }
            }
        });
    });
    

    You could also always return false, and then manually close the prompt only in the successful state:

    $('#delete_btn').click(function(event) {
        event.preventDefault();
    
        bootbox.prompt("Are you sure you want to done the record?<br/>Write 'done' below to confirm!", function(result) {
            if(result !== null){
                result = result.toLowerCase();
    
                if(result === 'done') {
                    /* submit your form, then... */
                    bootbox.hideAll();
    
                    // or $('.bootbox').modal('hide');
                } else {
                    alert('please enter something in textbox');
                }
            } else {
                bootbox.hideAll();
            }
        });
    
    
        return false;
    });