html required in form not working with issues in modal
<p>I have a modal where i put my form inside. Now, my problem is, when i click the button of my <code>onclick="regpatient()"</code>  button, the required will pop-up but when i look at it in console, the data was submited by a post because of my onlick function. How can i do this?</p>

<p>Here is my modal:</p>

<pre><code>&lt;div class="modal-body"&gt;
                &lt;form class="form-horizontal" id="frm_patientreg"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pfname"&gt;First Name:&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;input type="text" class="form-control" id="pafname" name="pafname" placeholder="First name" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pmname"&gt;Middle Name:&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;input type="text" class="form-control" id="pamname" name="pamname" placeholder="Middle name" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="plname"&gt;Last Name:&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;input type="text" class="form-control" id="palname" name="palname" placeholder="Last name" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="paddress"&gt;Address:&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;input type="text" class="form-control" id="paaddress" name="paaddress" placeholder="Address" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pcontact"&gt;Contact #:&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;input type="text" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' class="form-control" id="pacontact" name="pacontact" placeholder="Contact number" maxlength="11" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pbdate"&gt;Birthdate:&lt;/label&gt;
                  &lt;div class="col-sm-5"&gt;
                    &lt;div class="input-group date" data-provide="datepicker"&gt;
                        &lt;input type="text" class="form-control" id="pabdate" name="pabdate" placeholder="Birthdate" required&gt;
                        &lt;div class="input-group-addon"&gt;
                            &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="page"&gt;Age:&lt;/label&gt;
                  &lt;div class="col-sm-4"&gt;
                    &lt;input type="number" class="form-control" id="paage" name="paage" placeholder="Age" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pheight"&gt;Height:&lt;/label&gt;
                  &lt;div class="col-sm-4"&gt;
                    &lt;input type="number" class="form-control" id="paheight" name="paheight" placeholder="Height (cm)" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pweight"&gt;Weight:&lt;/label&gt;
                  &lt;div class="col-sm-4"&gt;
                    &lt;input type="number" class="form-control" id="paweight" name="paweight" placeholder="Weight (kg)" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="psex"&gt;Sex:&lt;/label&gt;
                  &lt;div class="col-sm-5"&gt;
                    &lt;select class="form-control" id="psex" name="psex"&gt;
                        &lt;option value="0"&gt;--- SELECT OPTION ---&lt;/option&gt;
                        &lt;option value="Male"&gt;Male&lt;/option&gt;
                        &lt;option value="Female"&gt;Female&lt;/option&gt;
                    &lt;/select&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-3" for="pmartiastat"&gt;Civil Status:&lt;/label&gt;
                  &lt;div class="col-sm-5"&gt;
                    &lt;select class="form-control" id="pmartialstat" name="pmartialstat"&gt;
                        &lt;option value="0"&gt;--- SELECT OPTION ---&lt;/option&gt;
                        &lt;option value="Single"&gt;Single&lt;/option&gt;
                        &lt;option value="Living common law"&gt;Living common law&lt;/option&gt;
                        &lt;option value="Married"&gt;Married&lt;/option&gt;
                        &lt;option value="Widowed"&gt;Widowed&lt;/option&gt;
                        &lt;option value="Separated"&gt;Separated&lt;/option&gt;
                        &lt;option value="Divorced"&gt;Divorced&lt;/option&gt;
                    &lt;/select&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;&lt;!-- modal-body --&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button value="submit" onclick="regpatient()" class="btn btn-primary"&gt;Register Patient&lt;/button&gt;
              &lt;/form&gt;
              &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;&lt;!-- modal-footer --&gt;
    &lt;/div&gt;&lt;!-- modal-content --&gt;
</code></pre>

<p>and here is my ajax where it fires when the button in footer of my modal is clicked:</p>

<pre><code>function regpatient() {
  var a = $('#psex').val();
  var b = $('#pmartialstat').val();

  if(a == "0" || b == "0") {
    alert("Please select option");
  }
  else {
    $.ajax({
    url: siteurl+"sec_myclinic/addpatient",
    type: "POST",
    data: $('#frm_patientreg').serialize(),
    dataType: "JSON",
      success: function(data) {
        alert("Successfully Added");
        $('#frm_patientreg')[0].reset();
      }
    });
  }
}
</code></pre>