How to execute jquery validation to array of input elements

Question

I have a dynamic list of inputs that gets name of the user. I need to validate, using jquery validate plugin. Below is my code structure.

Either jQuery validate does not support this array of validation or I am missing any code to achieve the task.

const users$ = jQuery("form.users");

const btnAddRow = jQuery("button.btn-add-row");

btnAddRow.on('click', function(){
   const trs$ = users$.find('table tbody tr');
   const len = trs$.length;
   let html = ` <tr>
      <td><input type="text" name="user[${len}][name]" /></td>
    </tr>`;
users$.find('table tbody').append(html);

setTimeout(()=>{  // Executed whenever there is addition of row
   setValidationRule();
})
})

var allInputBox = {};
  // Executed on default
   setValidationRule();




function setValidationRule(){
//looping through all inputs
jQuery("input[name*='user[']").each(function() {
  allInputBox[jQuery(this).attr('name')] = {
    required: true //add more params if needed.
  } //pushing in array
})

}


users$.validate({
  rules: {
    "username":{
    required: true
    },
    ...allInputBox
  },
  submitHandler:function(form, event){
    event.preventDefault();
    event.stopPropagation();
    console.log("passed");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<form class="users">
<input  type="name" name="username">
<button class="btn-add-row" type="button">Add Row</button>
<table>
  <tbody>
    <tr>
      <td><input type="text" name="user[0][name]" /></td>
    </tr>
     <tr>
      <td><input type="text" name="user[1][name]" /></td>
    </tr>
  </tbody>
</table>
<button>Submit</button>
</form>

---

Following the answer of @swati, dynamically creating a row, the validation rules are not applied

Answer 1

Based on @Swati answer, I need to destroy the previous instance and create a new instance every row is added are deleted. This solves my problem.

const users$ = jQuery("form.users");

const btnAddRow = jQuery("button.btn-add-row");

let validatorInstance = null;

btnAddRow.on('click', function(){
   const trs$ = users$.find('table tbody tr');
   const len = trs$.length;
   let html = ` <tr>
      <td><input type="text" name="user[${len}][name]" /></td>
    </tr>`;
users$.find('table tbody').append(html);

setTimeout(()=>{  // Executed whenever there is addition of row
   setValidationRule();
})
})


  // Executed on default
   setValidationRule();




function setValidationRule(){
let allInputBox = {};
//looping through all inputs
jQuery("input[name*='user[']").each(function() {
  allInputBox[jQuery(this).attr('name')] = {
    required: true //add more params if needed.
  } //pushing in array
})

if(validatorInstance){
validatorInstance.destroy(); // If the instance is not destroyed, new rules will not get into effect.
}

validatorInstance = users$.validate({
  rules: {
    "username":{
    required: true
    },
    ...allInputBox
  },
  submitHandler:function(form, event){
    event.preventDefault();
    event.stopPropagation();
    console.log("passed");
  }
})

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<form class="users">
<input  type="name" name="username">
<button class="btn-add-row" type="button">Add Row</button>
<table>
  <tbody>
    <tr>
      <td><input type="text" name="user[0][name]" /></td>
    </tr>
     <tr>
      <td><input type="text" name="user[1][name]" /></td>
    </tr>
  </tbody>
</table>
<button>Submit</button>
</form>

Answer 2

You can get all input names using some selector and then loop through all inputs to get the actual name and add any attribute in json object. Lastly, pass this json in your initialisation code for jquery validator.

Demo Code:

const users$ = $("form.users");

var allInputBox = {};
//looping through all inputs
$("input[name*='user[']").each(function() {
  allInputBox[$(this).attr('name')] = {
    required: true //add more params if needed.
  } //pushing in array
})

users$.validate({
  rules: {
    "username": {
      required: true
    },
    ...allInputBox, //passing all dynamic inputs
  },
  submitHandler: function(form, event) {
    event.preventDefault();
    event.stopPropagation();
    console.log("passed");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<form class="users">
  UserName: <input type="name" name="username">
  <table>
    <tbody>
      <tr>

        <td> user[0][name]: <input type="text" name="user[0][name]" /></td>
      </tr>
      <tr>
        <td>user[1][name]: <input type="text" name="user[1][name]" /></td>
      </tr>
    </tbody>
  </table>
  <button>Submit</button>
</form>