title: Jquery validation on dynamic file input
body: <p>I'm using Jquery validation and I have form which at the end allows users to submit any extra documents which may be useful. If they need to upload more than one extra document then they can click a button which will add a new file input box using Jquery. When a new file input is created I need to add a validation rule.</p>
  
  <p>I'm trying to use the following function to dynamically create the name of the new file input and add a validation rule to it. It gives the following error - "Uncaught TypeError: Cannot read property 'settings' of undefined"</p>
  
  <pre><code>&lt;h1&gt;New Application - 2&lt;/h1&gt;
  
  &lt;form method="post" id="appli-2"&gt;
      &lt;div class="container"&gt;
          &lt;div id="sections"&gt;
              &lt;div class="section"&gt;
                  &lt;div class="row" id="otherDoc"&gt;
                      &lt;div class="col-xs-12"&gt;
                          &lt;label class="required" for="other_doc1"&gt;Upload other documents(pdf, jpg png)&lt;/label&gt;
                          &lt;input type="file" class="file other_doc" name="other_doc" id="other_doc"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr&gt;
  
          &lt;button type="button" id="addOtherDoc" class="btn btn-default"&gt;Add another document&lt;/button&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
          &lt;label style="text-align: center;"&gt;Do you wish to register ?&lt;/label&gt;&lt;/br&gt;
          &lt;div="row"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;button id="yes" class="btn btn-default btn_nav"&gt;YES&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;button id="no" class="btn btn-default btn_nav"&gt;NO&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      //define template
      var template = $('#sections .section:first').clone();
  
      //define counter
      var sectionsCount = 1;
  
      //add new section
      $("#addOtherDoc").click(function() {
          //increment
          sectionsCount++;
  
          //loop through each input
          var section = template.clone().find(':input').each(function(){
  
              //set id to store the updated section number
              var newId = this.name + sectionsCount;
  
              //update for label
              $(this).prev().attr('for', newId);
  
              //update id
              $(this).attr('id', newId);
              this.name = newId;
  
          }).end()
  
          //inject new section
          .appendTo('#sections');
          reValidate();
          return false;
      });
  &lt;/script&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $("#appli-2").validate({
          rules: {  
              other_doc: {
                  required: true,
                  accept: "pdf,jpg,png"
              }
          },
          messages: {
              other_doc: {
                  required: "Select Image",
                  accept: "Only image type jpg/png/pdf is allowed"
              } 
          }      
      });       
  
  function reValidate() {
      var name = "#other_doc";
      name += sectionsCount;
  
      console.log(name);
      $(name).rules("add", { 
          required: true,  
          accept: "pdf,jpg,png",
          messages: {
              required: "Select Image",
              accept: "Only image type jpg/png/pdf is allowed"
          }
      });
  } 
  &lt;/script&gt;
  
  &lt;script&gt;
      $("#appli-2").validate({
          rules: {  
              other_doc: {
                  required: true,
                  accept: "pdf,jpg,png"
              }
          },
          messages: {
              other_doc: {
                  required: "Select Image",
                  accept: "Only image type jpg/png/pdf is allowed"
              } 
          }      
      });       
  
  function reValidate() {
      var name = "#other_doc";
      name += sectionsCount;
  
      console.log(name);
      $(name).rules("add", { 
          required: true,  
          accept: "pdf,jpg,png",
          messages: {
              required: "Select Image",
              accept: "Only image type jpg/png/pdf is allowed"
          }
      });
  } 
  &lt;/script&gt;
  </code></pre>