title: stop form submission and open a bootstrap modal (confirm dialogue box ) after validating using bootstrap validator
body: <pre><code>&lt;script&gt;
          $(document).ready(function() {
              $('#idfundtransferownaccounts').bootstrapValidator({
                  message: 'This value is not valid',
                  feedbackIcons: {
                      valid: 'glyphicon glyphicon-ok',
                      invalid: 'glyphicon glyphicon-remove',
                      validating: 'glyphicon glyphicon-refresh'
                  },
                  fields: {
                      fACNumber: {
                          validators: {
                              notEmpty: {
                                  message: 'please select a account number'
                              },
                              different: {
                                  field: 'tACNumber',
                                  message: 'Please select a different account number'
                              }
                          }
                      },
                      tACNumber: {
                          validators: {
                              notEmpty: {
                                  message: 'please select a account number'
                              },
                              different: {
                                  field: 'fACNumber',
                                  message: 'Please select a different account number'
                              }
                          }
                      },
                      amountValue: {
                          validators: {
                              notEmpty: {
                                  message: 'please enter a amount'
                              }
                          }
                      },
                      fACNarration: {
                          validators: {
                              notEmpty: {
                                  message: 'please fill the above field'
                              }
                          }
                      },
                      tACNarration: {
                          validators: {
                              notEmpty: {
                                  message: 'please fill the above field'
                              }
                          }
                      }
                  }
              });
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>this is the form validation i have made using bootstrap validator.</p>
  
  <pre><code>&lt;form class="form-horizontal" class="form-inline" name="fundtransferownaccounts" id="idfundtransferownaccounts" method="post" action="FundTransferToOwnAccounts" style="margin-left: px;margin-right: 5px;"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-3"&gt;From Account Number*&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;div class="btn-group div-inline"&gt;
                                  &lt;c:set var="accounts" scope="session" value="${accounts}"/&gt;
                                  &lt;c:set var="accountslist" value="${accounts.getAccountlist()}"/&gt;
                                  &lt;select name="fACNumber" id="faccountnumber" class="form-control" &gt;
                                      &lt;option selected disabled&gt;Select Account Number&lt;/option&gt;
                                      &lt;c:forEach var="num" begin="0" end="${accountslist.size()-1}"&gt;
                                          &lt;c:set var="accNum"  value="${accountslist.get(num).getAccountno()}"/&gt;
                                          &lt;option value="${accNum}"&gt;&lt;c:out value="${accNum}"/&gt;&lt;/option&gt;
                                      &lt;/c:forEach&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;input type="checkbox" id="getfaccountbalance" onclick="getfAccountBalance(document.getElementById('faccountnumber').value, this)"&gt; View Account Balance
                              &lt;label id="faccountbalance" style="color: blue" &gt;&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-3"&gt;To Account Number*&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;div class="btn-group" &gt;
                                  &lt;c:set var="accounts" scope="session" value="${accounts}"/&gt;
                                  &lt;c:set var="accountslist" value="${accounts.getAccountlist()}"/&gt;
                                  &lt;select name="tACNumber" id="taccountnumber" class="form-control" &gt;
                                      &lt;option selected disabled&gt;Select Account Number&lt;/option&gt;
                                      &lt;c:forEach var="num" begin="0" end="${accountslist.size()-1}"&gt;
                                          &lt;c:set var="accNum"  value="${accountslist.get(num).getAccountno()}"/&gt;
                                          &lt;option value="${accNum}"&gt;&lt;c:out value="${accNum}"/&gt;&lt;/option&gt;
                                      &lt;/c:forEach&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;input type="checkbox" id="gettaccountbalance" onclick="gettAccountBalance(document.getElementById('taccountnumber').value, this)"&gt; View Account Balance
                              &lt;label id="taccountbalance" style="color: blue"&gt; &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-3"&gt;Transfer Amount*&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;input name="amountValue" id="transferamount" type="text" class="input-sm"  maxLength="11" onkeyup="$(this).val(validcurrencyinput($(this).val()))" placeholder="0 . 00"&gt;
                              &lt;div class="form-group div-inline"&gt;
                                  &lt;select name="currencyType" id="currencytype" class="form-control" style="margin-left: 15px;font-size: 10px;"&gt;                                    
                                      &lt;option&gt;LKR&lt;/option&gt;
                                      &lt;option&gt;USD&lt;/option&gt;
                                      &lt;option&gt;EURO&lt;/option&gt;
                                      &lt;option&gt;DINAR&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;div class="space"&gt;&lt;/div&gt;
                              &lt;label id="amountvalue" style="color: blue"&gt; &lt;/label&gt;
                              &lt;label style="color:#017ebc; font-size: 11px;font-weight: bold;"&gt;Note: To transfer ten either enter 10 or 10.00&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-3"&gt;From Account Narration*&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;input name="fACNarration" type="text" class = "form-control input-sm"&gt;
                              &lt;div class="space"&gt;&lt;/div&gt;
                              &lt;label style="color:#999999; font-size: 11px;font-weight: bold;"&gt;Please limit your sender's account narration to 30 characters.&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-3"&gt;To Account Narration*&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;input name="tACNarration" type="text" class = "form-control input-sm"&gt;
                              &lt;div class="space"&gt;&lt;/div&gt;
                              &lt;label style="color:#999999; font-size: 11px;font-weight: bold;"&gt;Please limit your sender's account narration to 30 characters.&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-xs-offset-2 col-xs-10"&gt;
                              &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                              &lt;button type="button" class="btn btn-primary" onClick="this.form.reset();"&gt;Reset&lt;/button&gt;    
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <p>this is the form</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Confirm Your Transaction&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p&gt;Are You Sure to Proceed the Transaction&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button"  id="submit" class="btn btn-primary" data-dismiss="modal" onclick="submitform()"&gt;Proceed&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>this is the bootstrap modal i have implemented.
  now i want to pop up this modal and then send data to a servlet file.
  but in here the data is passed to servlet file after the button submission.</p>
  
  <p>i found the answer guys.
  we have to write some code in bootstrap validation onSuccess.
  here is the modified code.</p>
  
  <pre><code>$(document).click(function() {
              //$("#confirmownaccountsdiv").hide();
              $('#idfundtransferownaccounts').bootstrapValidator({
                  message: 'This value is not valid',
                  feedbackIcons: {
                      valid: 'glyphicon glyphicon-ok',
                      invalid: 'glyphicon glyphicon-remove',
                      validating: 'glyphicon glyphicon-refresh'
                  },
                  fields: {
                      fACNumber: {
                          validators: {
                              notEmpty: {
                                  message: 'please select a account number'
                              },
                              different: {
                                  field: 'tACNumber',
                                  message: 'Please select a different account number'
                              }
                          }
                      },
                      tACNumber: {
                          validators: {
                              notEmpty: {
                                  message: 'please select a account number'
                              },
                              different: {
                                  field: 'fACNumber',
                                  message: 'Please select a different account number'
                              }
                          }
                      },
                      amountValue: {
                          validators: {
                              notEmpty: {
                                  message: 'please enter a amount'
                              }
                          }
                      },
                      fACNarration: {
                          validators: {
                              notEmpty: {
                                  message: 'please fill the above field'
                              }
                          }
                      },
                      tACNarration: {
                          validators: {
                              notEmpty: {
                                  message: 'please fill the above field'
                              }
                          }
                      }
                  },
                  onSuccess:(function(e, data) {
                      e.preventDefault();
                      $('.modal').appendTo("body").modal('show');
                  })
              });
          });
  </code></pre>
  
  <p>thanks for the comments guys.</p>