title: Form validation doesn't works in bootstrap
body: <p>I have a &quot;little&quot; problem with my bootstrap modal. I'm loading into myModal a form created in temp.php file. Then I try to send this form to the save.php file using AJAX.
  Everything is OK but form validation doesn't works ( didn't checked if is empty before submitting the form).
  If I hard coding my form in the modal-body everything works fine.
  The problem occurs only when I load this form from external .php file...
  Any suggestions how to make form validation works in the right way?
  Thanks in advance!</p>
  <p>My index.php file:</p>
  <pre><code>    &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../bootstrap/css/bootstrap-theme.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../bootstrap/css/bootstrap.min.css&quot;&gt;
      &lt;script src=&quot;../jquery/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;../bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;button class=&quot;btn btn-success btn-sm&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot; data-backdrop=&quot;static&quot; onClick=&quot;fillModal('temp.php', 'modalTitle');&quot;&gt;Open modal&lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; role=&quot;dialog&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot; style=&quot;width:1650px;&quot;&gt;
      &lt;!-- Modal content--&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class=&quot;modal-title&quot; id=&quot;modal-header&quot;&gt;
                  
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body my_container-fluid&quot; id=&quot;modal-body&quot;&gt;
  
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;submit&quot; form=&quot;myForm&quot; class=&quot;btn btn-success btn-sm&quot; id=&quot;save&quot;&gt;Save&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger danger btn-sm&quot; data-dismiss=&quot;modal&quot; id=&quot;cancel&quot;&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  function fillModal(str, title) {
      var xhttp;
      document.getElementById(&quot;modal-body&quot;).innerHTML = &quot;&quot;;
      document.getElementById(&quot;modal-header&quot;).innerHTML = title;
  
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
          document.getElementById(&quot;modal-body&quot;).innerHTML = this.responseText;
          }
      };
    xhttp.open(&quot;POST&quot;, str, true);
    xhttp.send();
  }
  
  
  
  //Submit form with AJAX
  $(document).ready(function(){
      $(&quot;#save&quot;).click(function(event){
          event.preventDefault();                 //prevent default action 
          
      // AJAX request
          $.ajax({
              url : &quot;save.php&quot;,                   //form action url
              type: 'POST',                       //form method
              data : $(&quot;#myForm&quot;).serialize(),    //encode form elements for submission
              success: function(response){ 
                  $('.modal-body').html(response);
              },
              error: function(){
                  $('.modal-body').html('Error...');
              }   
          
          });
      });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This is my temp.php file:</p>
  <pre><code>&lt;?php
      echo &quot;&lt;form name=\&quot;myForm\&quot; id=\&quot;myForm\&quot; data-target=\&quot;#myModal\&quot;&gt;\n&quot;;
      echo &quot;&lt;table class=\&quot;table table-bordered table-condensed\&quot; style=\&quot;width:1240px;\&quot;&gt;\n&quot;;
      echo &quot;&lt;thead&gt;\n&quot;;
      echo &quot;  &lt;tr&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;bg-success th\&quot; style=\&quot;width: 170px; max-width: 170px;\&quot;&gt;Sample 1&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;bg-success th\&quot; style=\&quot;width: 170px; max-width: 170px;\&quot;&gt;Sample 2&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;bg-primary th\&quot; style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;Sample 3&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;bg-primary th\&quot; style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;Sample 4&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;bg-primary th\&quot; style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;Sample 5&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;bg-primary th\&quot; style=\&quot;width: 50px; max-width: 50px;\&quot;&gt;Sample 6\n&quot;;
      echo &quot;      &lt;th class=\&quot;active th\&quot; style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;Sample 7&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;active th\&quot; style=\&quot;width: 100px; max-width: 100px;\&quot;&gt;Sample 8&lt;/th&gt;\n&quot;;
      echo &quot;      &lt;th class=\&quot;active th\&quot; style=\&quot;width: 200px; max-width: 200px;\&quot;&gt;Sample 9&lt;/th&gt;\n&quot;;
      echo &quot;  &lt;/tr&gt;\n&quot;;
      echo &quot;&lt;/thead&gt;\n&quot;;
      echo &quot;  &lt;tr&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 170px; max-width: 170px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_1\&quot; placeholder=\&quot;Sample 1...\&quot; reguired&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 170px; max-width: 170px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_2\&quot; placeholder=\&quot;Sample 2...\&quot; reguired&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_3\&quot; placeholder=\&quot;Sample 3...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_4\&quot; placeholder=\&quot;Sample 4...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_5\&quot; placeholder=\&quot;Sample 5...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 50px; max-width: 50px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_6\&quot; placeholder=\&quot;Sample 6...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 130px; max-width: 130px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;number\&quot; name=\&quot;Sample_7\&quot; placeholder=\&quot;Sample 7...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 100px; max-width: 100px;\&quot;&gt;&lt;input  class=\&quot;form-control input-sm\&quot;type=\&quot;text\&quot; name=\&quot;Sample_8\&quot; placeholder=\&quot;Sample 8...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;      &lt;td style=\&quot;width: 200px; max-width: 200px;\&quot;&gt;&lt;input class=\&quot;form-control input-sm\&quot; type=\&quot;text\&quot; name=\&quot;Sample_9\&quot; placeholder=\&quot;Sample 9...\&quot;&gt;&lt;/td&gt;\n&quot;;
      echo &quot;  &lt;/tr&gt;\n&quot;;
      echo &quot;&lt;/tale&gt;\n&quot;;
      echo &quot;&lt;input type=\&quot;hidden\&quot; name=\&quot;act\&quot; value=\&quot;addNew\&quot;&gt;\n&quot;;
      echo &quot;&lt;/form&gt;\n&quot;;
  ?&gt;
  </code></pre>