title: Onclick validate form, if valid only submit form
body: <p>I have an html form that I first wish to validate with jQuery validation library jquery.validate.min.js and <strong>if form is valid</strong>, submit the form to a location.</p>
  
  <p>I have attempted the following:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css"&gt;
          &lt;script src="../../common/view/js/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="../../common/view/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="../../common/view/js/jquery.validate.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;form method="post" action="stock-c.php" id="issueform" name="issueform"&gt;
              &lt;input type="text" name="pid"/&gt;
              &lt;input type="button" name="button1" id="button1"/&gt;
              &lt;script type="text/javascript" src="js/issueValidation.js"&gt;&lt;/script&gt;
  
              &lt;!--Modal--&gt;             
              &lt;div id="myModal" class="modal fade" role="dialog"&gt;
                  &lt;div class="modal-dialog"&gt;
                       &lt;!--info to be displayed--&gt;
                       &lt;input type="submit" value="submit"/&gt; &lt;!--Explain1--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
          &lt;/from&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>issueValidation.js</p>
  
  <pre><code>$( document ).ready( function () {          
  $validator= $( "#issueform" ).validate( {
          rules: {
                  pid: "required",
          },
          messages: {
                  pid: "Please enter a value",
          },
          errorElement: "em",
          errorPlacement: function ( error, element ) {
                  // Add the `help-block` class to the error element
                  error.addClass( "help-block" );
  
                  if ( element.prop( "type" ) === "checkbox" ) {
                          error.insertAfter( element.parent( "label" ) );
                  } else {
                          error.insertAfter( element );
                  }
          },
          highlight: function ( element, errorClass, validClass ) {
                  $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
          },
          unhighlight: function (element, errorClass, validClass) {
                  $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
          }
  });
  
  $('#button1').on('click', function() {
      $("#issueform").valid();    //everything works upto here
      if($validator.noOfInvalids()===0){     //this code doesn't work
          $('#myModal').modal('toggle');
      }
  });
  
  });
  </code></pre>
  
  <p><strong>Explain1:</strong> I placed my submit button in the modal class which is within the form tags, so that when clicked the form data gets submitted.</p>
  
  <p>Ideally I want to halt submission until form is validated. If the form is valid I must be able to review my form data in the modal and click the submit button on it, thereby making the from submit.</p>
  
  <p>I tried using the submitHandler in jQuery validation plugin (which executes only when there are no invalids in the form) to initialize the modal, but to do that I need to change input[type="button"] to input[type="submit"] since the handler works only on the submit button. Then I end up with two submit buttons in the same form and the form doesn't submit properly.</p>
  
  <p>Please help me rectify this issue. As a recap, I need to validate data entered to a form and request confirmation from user in a modal. If user confirms in modal, the data in the form gets submitted. If my method is an unnecessary method to achieve this outcome, alternative suggestions are also welcome as long as it conforms to the the requirement stated above. Thank You.</p>