2015-05-05 14 views
8

Utilizzo il bootbox per creare finestre popup con moduli e devo convalidarli e generare un errore all'utente se qualcosa non va nei campi del modulo. Ma non riesco a impedire la chiusura della finestra Bootbox dopo che l'utente ha fatto clic sul pulsante "Send". Devo mostrare all'utente le notifiche di errore, quindi è possibile correggere gli errori e inviare nuovamente il modulo.Impedisci il bootbox dalla chiusura della finestra popup

return false funziona bene, ma dopo non riesco a trovare il metodo, per ripristinare il metodo usuale di bootbox per chiudere le finestre.

Qualcuno ha affrontato lo stesso problema e come ci si libera da questa situazione?

Come chiesto, fsFiddle:

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

Codice:

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

    }); 
}); 
+0

E 'normalmente utile per includere anche il codice di esempio nella domanda stessa, sia per la completezza. e per proteggersi dall'eventuale marciume di collegamento che si instaura. –

risposta

14

io non sono al 100% sicuro che cosa è che si desidera. Lo capisco come: "Mantieni il modale aperto fino a quando il modulo è valido".

Se questo è quello che vi serve, si potrebbe procedere come ad esempio:

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