How to execute jquery validation to array of input elements

AlaksandarJesusGene
September 14, 2024
191 views
0 votes
2 Answers

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.

I went through all the SO questions and could not get proper solution.

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

Downvoters, thank you for your service.

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>

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

Tags: jquery jquery-validate

Answers

Chosen as BEST ANSWER

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>

(Edit)

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>

Please signup or login to give your own answer.

Click here to cancel reply.