title: Jquery validation for dynamically adding rows-
body: <p>I am using Jquery validate plugin for doing my form validation.</p>
  
  <p>In my form, I had an usecase of adding rows dynamically upon clicking an add button. </p>
  
  <p>Adding new row, will result in generating a new name for the row (new name is appending a number to the original name).</p>
  
  <p>I have written the validation logic, which will validate the first standard row itself, but the subsequent addition of rows will not be getting validated.</p>
  
  <p>Need help in making validation for these dynamic Names w.r.t added rows.</p>
  
  <p>Below is my html code, where standard row was mentioned with the class and Names to the elements in the row.
  The js file contains the logic to add the rows dynamically and the validation logic.</p>
  
  <p>Html:</p>
  
  <pre><code>    &lt;tbody&gt;
     &lt;tr&gt;
        &lt;td&gt;
           &lt;div class="uriDiv input-group"&gt;
              &lt;input type="text" name="uriName" class="common form-control authUrl"
                 id="uriName" placeholder="URL for the Policy" /&gt;
           &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div class="uriDiv input-group"&gt;
              &lt;select class="common authSelect form-control" name="authType" id="authType"&gt;
                 &lt;option value=""&gt;
                    &lt;spring:message
                       code="newPolicy.selectAuthType"&gt;&lt;/spring:message&gt;
                 &lt;/option&gt;
                 &lt;option value="DB"&gt;DB&lt;/option&gt;
                 &lt;option value="LDAP"&gt;LDAP&lt;/option&gt;
              &lt;/select&gt;
           &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div class="auth-permission-rd"&gt;
              &lt;div class="uriDiv radio radio-left"&gt;
                 &lt;label&gt; &lt;input type="radio" class="common anyuser authPermission"
                    value="anyUser" name="authPermission" id="anyUser" disabled="disabled"&gt;Any
                 User
                 &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="uriDiv radio radio-input"&gt;
                 &lt;label&gt; &lt;input type="radio" class="common groupuser authPermission"
                    value="groupUser" name="authPermission" id="groupUser" disabled="disabled"&gt;
                 &lt;input type="text" name="authPermissionValue" disabled="disabled"
                    class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" /&gt;
                 &lt;/label&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;button type="button"
           class="btn btn-primary delete-but-grid"&gt;
           &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
           &lt;/button&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td colspan="4"&gt;
           &lt;button type="button" id="addBtn"
              class="btn add-but-grid glyphicon glyphicon-plus-sign"&gt;&lt;/button&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>js:adding new rows</p>
  
  <pre><code>$("#addBtn").click(function() {
  var divAdd = '
  &lt;tr id=' + dynamicCount + '&gt;
     &lt;td&gt;
        &lt;div class="uriDiv input-group"&gt;&lt;input type="text" name="uriName' + dynamicCount + '" class="common form-control" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/&gt;&lt;/div&gt;
     &lt;/td&gt;
     '
     divAdd = divAdd + '
     &lt;td&gt;
        &lt;div class="uriDiv input-group"&gt;
           &lt;select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '"&gt;
              &lt;option value=""&gt;Select Auth Type &lt;/option&gt;
              &lt;option value="DB"&gt;DB&lt;/option&gt;
              &lt;option value="LDAP"&gt;LDAP&lt;/option&gt;
           &lt;/select&gt;
        &lt;/div&gt;
     &lt;/td&gt;
     '
     divAdd = divAdd + '
     &lt;td&gt;
        &lt;div class="auth-permission-rd"&gt;
           &lt;div class="uriDiv radio radio-left"&gt;&lt;label&gt; &lt;input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount  + '" id="anyUser"&gt;Any User&lt;/label&gt;&lt;/div&gt;
           '
           divAdd = divAdd + '
           &lt;div class="uriDiv radio radio-input"&gt; &lt;label&gt; &lt;input type="radio" class="common groupuser authPermission"  value="groupUser" disabled="disabled" name="authPermission' + dynamicCount  + '"id="groupUser"&gt;&lt;input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /&gt;&lt;/label&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;/td&gt;
     '
     divAdd = divAdd + '
     &lt;td&gt;&lt;button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  '
  $('#uriInfo tr:last').before(divAdd);
  dynamicCount++;
  });
  </code></pre>
  
  <p>js validation: some part of it.</p>
  
  <pre><code>    $("#policy-form").validate({
  rules:{
  
      uriName:{
          required: true
      },
      authType:{
          required: true
      },
      authPermission:{
          required: true
      },
  
  },
  </code></pre>
  
  <p>Need help in getting the validation for dynamic rows.</p>
  
  <p>Thanks.</p>