title: Form validation before Submit
body: <p>I have the  following form that needs to feed into the  database but I would like it to be validated before it can be saved into the  database :</p>
  
  <pre><code>&lt;form name="add_walkin_patient_form" class="add_walkin_patient_form" id="add_walkin_patient_form"  autocomplete="off" &gt;
  
                  &lt;div class="form-line"&gt;
  
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;
                              Patient Name
                          &lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;input type="text" name="patientname" id="patientname" required="" value=""/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;
                              Patient Phone Number
                          &lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;input type="text" name="patient_phone" id="patient_phone" required="" value=""/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;
                              Department
                          &lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;select name="department" required="" class="department" id="department"&gt;
                                  &lt;option value=""&gt;Please select : &lt;/option&gt;
                                  &lt;option value="Pharmacy"&gt;Pharmacy&lt;/option&gt;
                                  &lt;option value="Laboratory"&gt;Laboratory&lt;/option&gt;
                                  &lt;option value="Nurse"&gt;Nurse&lt;/option&gt;
  
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right"&gt;
                      Add Walk In Patient
                  &lt;/button&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>And the  submit is done by a jquery script using the following script : </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          //delegated submit handlers for the forms inside the table
          $('#add_walkin_patient_button').on('click', function (e) {
              e.preventDefault();
  
              //read the form data ans submit it to someurl
              $.post('&lt;?php echo base_url() ?&gt;index.php/reception/add_walkin', $('#add_walkin_patient_form').serialize(), function () {
                  //success do something
  
                  // $.notify("New Patient Added Succesfully", "success",{ position:"left" });
                  $(".add_walkin_patient_form").notify(
                          "New Walkin Patient Added Successfully",
                          "success",
                          {position: "center"}
                  );
                  setInterval(function () {
                      var url = "&lt;?php echo base_url() ?&gt;index.php/reception/";
                      $(location).attr('href', url);
                  }, 3000);
  
  
              }).fail(function () {
                  //error do something
                  $(".add_walkin_patient_form").notify(
                          "There was an error please try again later or  contact the system support desk  for assistance",
                          "error",
                          {position: "center"}
                  );
  
              })
          })
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I put form validation to check if input is empty before submitting it into the  script? </p>