title: Validating a form in Twitter Bootstrap Model
body: <p>I have a form in a modal with some required fields, but when I hit submit the form just reloads and I don't get any message for validation that I am using for submitting the form jQuery, as below :</p>
  
  <pre><code>&lt;script&gt;
      $('#InfroTextSubmit').click(function(){
          $('#InfroText').submit();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The Twitter Bootstrap Modal Code is : </p>
  
  <pre><code>&lt;!-- Modal1 --&gt;
  &lt;div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Edit Introduction&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;form id="InfroText" method="POST"&gt;
        &lt;input type="hidden" name="InfroText" value="1"/&gt;
        &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="title" style="width:300px" required="require"/&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Introudction&lt;/td&gt;&lt;td&gt;&lt;textarea name="contect" style="width:300px;height:200px"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button class="btn btn-primary" id="InfroTextSubmit"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('#InfroTextSubmit').click(function(){
          $('#InfroText').submit();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So how can i Validate the Form and not let the model close and reload if something is wrong with the form ?</p>
  
  <p>Regards,</p>