title: How to validate dynamic content using jQuery Validate plugin
body: <p>I'm having issues validating some dynamic content. The closest I have come to finding a similar problem is this:
  <a href="https://stackoverflow.com/questions/13170006/jquery-validate-is-not-working-with-dynamic-content">jquery-validate-is-not-working-with-dynamic-content</a></p>
  
  <p>My form is a basic form, enter name, email, phone etc. But there's this question "How many passengers?"
  This is a <code>select</code> and depending on how many passengers you select, I use jQuery to create more fields based on this amount using this:</p>
  
  <pre><code>$('select.travellers').attr('name','Number of travelers').on('click', function() {
            var travellers = this.value; //On change, grab value
            var dom = "";
            for(var i = 0; i &lt; travellers; i++){ //for 0 is less than travellers
                dom += '&lt;label&gt;Full Name&lt;/label&gt;';
                dom += '&lt;input type="text" name="FullName_'+i+'"&gt;';
                dom += '&lt;label&gt;Food&amp;nbsp;requirements&lt;/label&gt;';
                dom += '&lt;select size= "0" name="Food Requiries_'+i+'"  tabindex="-1"  &gt;
                        &lt;option value="No pork"&gt;No pork&lt;/option&gt;
                        &lt;option value="Halal"&gt;Halal&lt;/option&gt;
                        &lt;option value="Food allergies"&gt;Food allergies&lt;/option&gt;
                        &lt;option value="Other"&gt;Other&lt;/option&gt;&lt;/select&gt;';
            }
            $('.form_Additional').html(dom); //add dom into web page
          });
  </code></pre>
  
  <p>The output is an <code>input</code> field asking for the additional passenger name and a <code>select</code> asking for their food requirements</p>
  
  <p>How do I validate these newly created elements? This is what I have so far:</p>
  
  <pre><code>$(document).ready(function(e) {
  
      //validation rule for select
      $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
       }, "Value must not equal arg.");
  
  
      //validate form
      $("#FORMOB7DC24203803DC2").on("click", function(event){
          $(this).validate({
              rules: {
                  FullName:{
                      required: true  
                  },
                  FullName_0:{
                      required: true  
                  },
                  'Number of travelers':{
                      valueNotEquals: "Please select" 
                  }
              }
          });
      });
  });
  </code></pre>
  
  <p>Is there a way to make this dynamic? Because this form allows for up to 30 passengers and I don't want to manually write in rules <code>FullName_0</code>, <code>FullName_1</code>, <code>FullName_2</code>  etc etc.</p>
  
  <p>I added the rule <code>FullName_0</code> and it doesn't validate so I don't know what I'm doing wrong.</p>
  
  <p>note - simplified code for readability</p>