title: JQuery validate within a Twitter Bootstrap modal with PHP
body: <p>I'm working on a transport planner and in my tasks table I have a button to sign a routenumber to a task. When a task haven't got a routenumber at all, the button will call a bootstrap modal to assign a new routenumber to that task which will also be the standard routenumber. </p>
  
  <p>When a task already has a routenumber, the button will call the <strong>same</strong> modal with a new checkbox added. Unchecked means, change the routenumber only today, checked means, make the inserted routenumber the standard routenumber.</p>
  
  <p>I'm using JQuery for the validation but nothings happend and the form is submitted without validation. What am I doing wrong..?</p>
  
  <p><strong>LINK TO CALL THE MODAL:</strong></p>
  
  <pre><code>&lt;a href="#routenummer_view&lt;?php echo $row['planning_id']; ?&gt;" class="btn strong" data-toggle="modal"&gt;&lt;?php if ($row['routenummer'] != ''){ echo $row['routenummer']; } if ($row['routenummer'] == ''){ ?&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;&lt;?php }?&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>MODAL:</strong></p>
  
  <pre><code>&lt;div id="routenummer_view&lt;?php echo $row['planning_id']?&gt;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummer_viewLabel" aria-hidden="true"&gt;
      &lt;form class="modal-form" action="../includes/modals/routenummer/submit_view_routenummer.php"
          data-remote="true" method="post" id="routenummer_edit"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3 id="routenummerviewLabel"&gt;&lt;?php if ($row['routenummer'] == ''){ echo 'Standaard Routenummer Invoeren';} else echo 'Routenummer Wijzigen';?&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
  
              &lt;label&gt;Routenummer:&lt;/label&gt; 
                  &lt;input type="text" name="routenummer" &lt;?php if ($row['routenummer'] != NULL){ ?&gt;value="&lt;?php if ($row['routenummer'] != NULL){ echo $row['routenummer']; echo '" /&gt;&lt;br /&gt;';}?&gt; &lt;?php } if ($row['routenummer'] == NULL){ ?&gt; placeholder="Typ hier een routenummer..." /&gt;&lt;?php if ($row['routenummer'] != NULL){ echo '&lt;br /&gt;'; }}?&gt;
                  &lt;?php if ($row['routenummer'] != NULL){ ?&gt;
                   &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="standaard"&gt; Maak standaard routenummer.&lt;/label&gt;
                       &lt;?php }?&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;input type="hidden" name="opdrachtid" value="&lt;?php echo $row['planning_id']; ?&gt;" /&gt;
              &lt;input type="submit" value="&lt;?php if ($row['routenummer'] == ''){ echo 'Invoeren';} else echo 'Wijzigen';?&gt;" class="btn btn-primary" /&gt;
              &lt;a href="#" class="btn" data-dismiss="modal"&gt;Annuleren&lt;/a&gt;
          &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("#routenummer_edit").validate({
          onkeyup : false,
          rules : {
              routenummer : {
                  required : true,
                  digits: true
              }
          },
          messages : {
              routenummer : {
                  required : "Routenummer is verplicht.",
                  digits : "Routenummer moet een getal zijn."
              }
          },
      });
  });
  </code></pre>
  
  <p><strong>EXAMPLE IMAGE</strong>
  <img src="https://i.stack.imgur.com/45qRX.png" alt="Example image"></p>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>RENDERED HTML</strong></p>
  
  <p><strong>When a task doesn't have a standard routenumber:</strong></p>
  
  <pre><code>&lt;div id="routenummer_view90" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummer_viewLabel" aria-hidden="true"&gt;
      &lt;form class="modal-form" action="../includes/modals/routenummer/submit_view_routenummer.php"
          data-remote="true" method="post" id="routenummer_edit"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3 id="routenummerviewLabel"&gt;Standaard Routenummer Invoeren&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
  
              &lt;label&gt;Routenummer:&lt;/label&gt; 
                  &lt;input type="text" name="routenummer"  placeholder="Typ hier een routenummer..." /&gt;                     
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;input type="hidden" name="opdrachtid" value="90" /&gt;
              &lt;input type="submit" value="Invoeren" class="btn btn-primary" /&gt;
              &lt;a href="#" class="btn" data-dismiss="modal"&gt;Annuleren&lt;/a&gt;
          &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>When a task <em>does</em> have a standard routenumber:</strong></p>
  
  <pre><code>&lt;div id="routenummer_view67" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummer_viewLabel" aria-hidden="true"&gt;
      &lt;form class="modal-form" action="../includes/modals/routenummer/submit_view_routenummer.php"
          data-remote="true" method="post" id="routenummer_edit"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3 id="routenummerviewLabel"&gt;Routenummer Wijzigen&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
  
              &lt;label&gt;Routenummer:&lt;/label&gt; 
                  &lt;input type="text" name="routenummer" value="21" /&gt;&lt;br /&gt;                                &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="standaard"&gt; Maak standaard routenummer.&lt;/label&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;input type="hidden" name="opdrachtid" value="67" /&gt;
              &lt;input type="submit" value="Wijzigen" class="btn btn-primary" /&gt;
              &lt;a href="#" class="btn" data-dismiss="modal"&gt;Annuleren&lt;/a&gt;
          &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code>$(document).ready(function() {
  $('.modal-form').each(function () {
              $(this).validate({ // initialize the plugin
                  rules: {
                      routenummer: {
                          required: true,
                          digits: true
                      }
                  },
                  messages : {
                      routenummer : {
                          required : "Routenummer is verplicht.",
                          digits : "Routenummer moet een getal zijn."
                      }
              }
          });
  });
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>MODAL</strong></p>
  
  <pre><code>&lt;div id="routenummer&lt;?php echo $row['planning_id']?&gt;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummerLabel" aria-hidden="true"&gt;
      &lt;form class="modal-form" action="../includes/modals/routenummer/submit_routenummer.php"
          data-remote="true" method="post"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3 id="routenummerLabel"&gt;&lt;?php if ($row['routenummer'] == ''){ echo 'Standaard Routenummer Invoeren';} else echo 'Routenummer Wijzigen';?&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
  
              &lt;label&gt;Routenummer:&lt;/label&gt; 
                  &lt;input type="text" name="routenummer" &lt;?php if ($row['routenummer'] != NULL){ ?&gt;value="&lt;?php if ($row['routenummer'] != NULL){ echo $row['routenummer']; echo '" /&gt;&lt;br /&gt;';}?&gt; &lt;?php } if ($row['routenummer'] == NULL){ ?&gt; placeholder="Typ hier een routenummer..." /&gt;&lt;?php if ($row['routenummer'] != NULL){ echo '&lt;br /&gt;'; }}?&gt;
                  &lt;?php if ($row['routenummer'] != NULL){ ?&gt;
                   &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="standaard"&gt; Maak standaard routenummer.&lt;/label&gt;
                       &lt;?php }?&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;input type="hidden" name="opdrachtid" value="&lt;?php echo $row['planning_id']; ?&gt;" /&gt;
              &lt;input type="submit" value="&lt;?php if ($row['routenummer'] == ''){ echo 'Invoeren';} else echo 'Wijzigen';?&gt;" class="btn btn-primary" /&gt;
              &lt;a href="#" class="btn" data-dismiss="modal"&gt;Annuleren&lt;/a&gt;
          &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>