How to execute jquery validation to array of input elements [duplicate]

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/[email protected]/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

Swati · Accepted Answer · 2024-09-14 06:51:08Z

0

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/[email protected]/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>

answered Sep 14, 2024 at 6:51

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alaksandar Jesus Gene Over a year ago

It is not working for dynamic html. I have updated the code with Add Row button. You can test on that.

Alaksandar Jesus Gene · Accepted Answer · 2024-09-14 07:39:19Z

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/[email protected]/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>

Collectives™ on Stack Overflow

How to execute jquery validation to array of input elements [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related