[javascript] Bootstrap Modal before form Submit

I'm new to Modals, I have a Form and when the user clicks submit, It will show a Modal confirming if the user wants to submit, the modal also contains the user input from the form fields. I searched all over the internet but can't find the right one on my needs. And all I see is that they tag the click event to open modal on a a link. i have a input type submit. Can you give examples or ideas? Thanks! Here's my sample form.

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>

You can use browser default prompt window. Instead of basic <input type="submit" (...) > try:

<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>

I noticed some of the answers were not triggering the HTML5 required attribute (as stuff was being executed on the action of clicking rather than the action of form send, causing to bypass it when the inputs were empty):

1. Have a <form id='xform'></form> with some inputs with the required attribute and place a <input type='submit'> at the end.
2. A confirmation input where typing "ok" is expected <input type='text' name='xconf' value='' required>
3. Add a modal_1_confirm to your html (to confirm the form of sending).
4. (on modal_1_confirm) add the id modal_1_accept to the accept button.
5. Add a second modal_2_errMsg to your html (to display form validation errors).
6. (on modal_2_errMsg) add the id modal_2_accept to the accept button.
7. (on modal_2_errMsg) add the id m2_Txt to the displayed text holder.

8. The JS to intercept before the form is sent:

   $("#xform").submit(function(e){
       var msg, conf, preventSend;
   
       if($("#xform").attr("data-send")!=="ready"){
           msg="Error."; //default error msg
           preventSend=false;
   
           conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, "");
   
           if(conf===""){
               msg="The field is empty.";
               preventSend=true;
           }else if(conf!=="ok"){
               msg="You didn't write \"ok\" correctly.";
               preventSend=true;
           }
   
           if(preventSend){ //validation failed, show the error
               $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg
               $("#modal_2_errMsg").modal("show");
           }else{ //validation passed, now let's confirm the action
               $("#modal_1_confirm").modal("show");
           }
   
           e.preventDefault();
           return false;
       }
   });
   

`9. Also some stuff when clicking the Buttons from the modals:

$("#modal_1_accept").click(function(){
    $("#modal_1_confirm").modal("hide");
    $("#xform").attr("data-send", "ready").submit();
});

$("#modal_2_accept").click(function(){
    $("#modal_2_errMsg").modal("hide");
});

Important Note: So just be careful if you add an extra way to show the modal, as simply clicking the accept button $("#modal_1_accept") will assume the validation passed and it will add the "ready" attribute:

• The reasoning for this is that $("#modal_1_confirm").modal("show"); is shown only when it passed the validation, so clicking $("#modal_1_accept") should be unreachable without first getting the form validated.

It is easy to solve, only create an hidden submit:

<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >

with jQuery you click the submit:

$("#submitCadastro").click(function(){
    if($("#checkDocumentos").prop("checked") == false){
        //alert("Aceite os termos e condições primeiro!.");
        $("#modalERROR").modal("show");
    }else{
        //$("#formCadastro").submit();
        $("#submitCadastroHidden").click();                     
    }
});

$('form button[type="submit"]').on('click', function () {
   $(this).parents('form').submit();
});