title: Code igniter form validation before opening modal window
body: <p>I currently have a form that I wish to implement form validation for. I'm using the code igniter framework.</p>
  
  <p>When I click the submit form button, the form doesn't submit then, instead a modal window pops up with the information the user has just entered( sort of like confirmation that they have entered the correct details.) 
  When the user clicks ok in the modal window the form then submits through ajax and another modal window pops up to confirm the form has been submitted.</p>
  
  <p>What I'm looking to do is validate the form before the first modal window pops up but I can't seem to find a way to do so. Does anyone know how I can do this?</p>
  
  <p>This is my form:</p>
  
  <pre><code>&lt;?php if(isset($error)){
  echo "&lt;i&gt;" . $error . "&lt;/i&gt;";
  }?&gt;
  &lt;form id ="form1" name ="form1"&gt;
      &lt;div class="hospital_container"&gt;
          &lt;h3 class = "hospital_header"&gt;&lt;b&gt;Enter Hospital Information&lt;/b&gt;&lt;/h3&gt;
  
      &lt;label for="hospitalName"  id ="hospLabel" class = "labelForm"&gt;Name:&lt;/label&gt;
      &lt;input type="text" class = "input2" id="hospitalName" name="hospitalName" class = "newUserForm"&gt;
  
          &lt;button type="button"  id = "hospital_submit_button" class = "hospital_submit_button" data-toggle="modal" data-target="#userModal"&gt;Add New Hospital&lt;/button&gt; // triggers the modal window but I want to run form validation before this.
  
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Ajax for submit:</p>
  
  <pre><code>     $(function() {
  //#overlaysubclass2 is the name of the submit button in the modal window
              $("#overlaysubclass2").on("click", function(event) {
                  event.preventDefault();
                  var DataString=$("#form1").serialize()
                  $.ajax({
                      url: "&lt;?php echo base_url(); ?&gt;index.php/Admin/createHospital",
                      type: "post",
                      data:DataString ,
                      success: function(data) {
  
                          $("#userModal").modal('hide'); // hide the original modal and show the confirmation modal
                          $("#confirmModal").modal('show');
                      }
  
  
                  });
              });
          });
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code> function createHospital(){
      $this-&gt;load-&gt;library('form_validation');
  
      $this-&gt;form_validation-&gt;set_rules('hospitalName', 'hospitalName', 'required');
    //  $this-&gt;form_validation-&gt;set_rules('hospAddress', 'hospAddress', 'required');
  
  
      if ($this-&gt;form_validation-&gt;run() === FALSE) {
          $data['error'] = 'Please fill in the form';
          $this-&gt;load-&gt;view('includes/admin/header');
         $this-&gt;load-&gt;view('newHospital');
  
      }else {
          $data = array(
  
              'hospitalName' =&gt; $this-&gt;input-&gt;post('hospitalName'),
          );
  
          $this-&gt;user_model-&gt;create_hospital($data);
        //$data['message'] = 'Data Inserted Successfully';
          $this-&gt;load-&gt;view('newHospital');
      }
  }
  </code></pre>
  
  <p>The form validation isn't actually running though its allowing me to submit a blank form</p>
  
  <p>Any help is greatly appreciated as I'm really stuck!</p>