How to validate array of inputs using validate plugin jquery

You can pass an option in to ignore part of a field name; As for the original posts comments, there are plenty of use-cases for having a name[] style name in HTML, especially using PHP.

$("#my-form").validate({
  submitHandler: function(form) {
    form.submit();
  },
  ignore: [],
  rules: {
    'category[]': {
      required: true
    }
  }
});

I noticed that the jQuery validate plugin i use will only detect the first element with a specific name.

Another way to make the jQuery validate plugin also detect all the inputs beyond the first could be by making the names unique. So you could replace:

<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />

with:

<input type="text" name="qty[0]" />
<input type="text" name="qty[1]" />
<input type="text" name="qty[2]" />
<input type="text" name="qty[3]" />

This is the Best solution I found and I'am currently using in my project:

// Adding rule to each item in qtyi list 
jQuery('[id^=qty]').each(function(e) {
    jQuery(this).rules('add', {
        minlength: 2,
        required: true
    });
});

You need to make indexing of each elements

Below is html code.

<form id="transport-form">
  <input type="text" name="qty[0]" id="qty1">
  <input type="text" name="qty[1]" id="qty2" >
  <input type="text" name="qty[2]" id="qty3">
  <input type="text" name="qty[3]" id="qty4">
  <input type="submit value="submit">
</form>

and jquery code is below

jQuery("#transport-form").validate({
    rules: {
        'qty[]': {
            required: true
        }
    },
});

First, for jQuery to distinguish between the elements you need to have a different id per element. This can be done programmatically when you add the inputs. Then what you need to do is to verify all inputs with common name at once. For that, create a custom validator using the addMethod() function as described in the documentation

jQuery.validator.addMethod("allRequired", function(value, elem){
        // Use the name to get all the inputs and verify them
        var name = elem.name;
        return  $('input[name="'+name+'"]').map(function(i,obj){return $(obj).val();}).get().every(function(v){ return v; });
    });

You can use this as a rule on your array elements :

$('form').validate(
        {
         rules: { 
               "nbPieces[]": "allRequired"
         },

         submitHandler : function(form, event) {
              event.preventDefault();   
              //... etc
         }
});

For the errors to appear correctly on the empty fields though, you may need to override the errorPlacement option from validate...

Here the solution without giving indexing to array.

<form>
    <div>Name:
       <p>
        <input name="name_ct[]" id="id_ct0" type="text" class="form-control" placeholder="Add Variant 1 Name">
        </p>
    </div>
    <input type="button" value="Add Variant" />
    <input type="submit" />
</form>

js Code

$(document).ready(function () {
 $.validator.addMethod("mytst", function (value, element) {
        var flag = true;

      $("[name^=name_ct]").each(function (i, j) {
                        $(this).parent('p').find('label.error').remove();
$(this).parent('p').find('label.error').remove();                        
                        if ($.trim($(this).val()) == '') {
                            flag = false;

                            $(this).parent('p').append('<label  id="id_ct'+i+'-error" class="error">This field is required.</label>');
                        }
                    });


                    return flag;


    }, "");
$("form").validate({

    ignore: '',
    rules: {
        "name_ct[]": {
            mytst:true
        }
    },
    submitHandler: function () {
        //you can add code here to recombine the variants into one value if you like, before doing a $.post
         form.submit();
        alert('successful submit');
        return false;
    }
});

var j = 1;
$('input[type="button"]').click(function () {
    $('form div').append('<p><input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant ' + j + ' Name " ></p>');

    j++;
});
});

you can see here in js fiddle: https://jsfiddle.net/q0d76aqx/42/

I've used solution proposed by AsgarAli Khanusiya but JQuery.Validator shows label with error message in same cases in the wrong place. It happens because it stores previously shown messages. If user make same mistake with different item in the collection then validator displays label in the previous place instead of generation new label near element with issue. I've overrided 'errorsFor' method to solve this:

$.validator.prototype.errorsFor = function (element) {
    var name = this.idOrName(element);
    var elementParent = element.parentElement;
    return this.errors().filter(function() {
        return $(this).attr('for') == name && $(this).parent().is(elementParent);
    });
}

rules:{
     textname:{
     required:true
     },         
     'checkbox[]':{
      checkbox: true
   }
}

Please check this is very easy and working solution

Hi jQuery validation only validate 1st element of array input if you customize

checkForm: function() {
this.prepareForm();
for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
    if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
        for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
            this.check(this.findByName(elements[i].name)[cnt]);
        }
    } else {
        this.check(elements[i]);
    }
}
return this.valid();} // this is not workig proper so you don't toch this code 

but I saw this code also not working some scenario so that i find Tigger point of form summation after validation. if you want to validate custom I share you trick you can customization you own validation then submit your form. code in below .

====================================================================

    checkForm: function() {
        this.prepareForm();
        for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ ) {
            this.check( elements[ i ] );
        }
        return this.valid();
    }, // write  as it is its woking now 

====================================================================

$(document).ready(function($) {

$("#my_form").validate({

rules: {
    "product_name": "required",                    
    // "product_image[]": "required",                    
                  
//  password: {
//      required: true,
//      minlength: 6
//  },
//    city: "required",
//   gender: "required"
 
},
messages: {
    "product_name": "Please enter Product Name",
    // "product_image[]": "required",  
//  password: {
//      required: "Please provide a password",
//      minlength: "Your password must be at least 6 characters long"
//  },
//   city: "Please enter your city",
//   gender: "This field is required"
},
 errorPlacement: function(error, element) 
{
if ( element.is(":radio") ) 
{
    error.appendTo( element.parents('.form-group') );
}
else 
{ // This is the default behavior 
    error.insertAfter( element );
}
},
    submitHandler: function(form) {
        var values = $("input[name='product_image[]']").map(function(){return $(this).val();}).get();
        for (let i = 0; i < values.length; i++) {
            if(values[i] === "")
            {
                
                alert('Please select Image on position : '+(i+1));
                return false;
            }else{

            }
        }
        console.log(values.includes(''));
        if(values.includes('') === false);
        {
            
            form.submit();

        }
    
    }
    
});

});

form.submit(); is main Tigger so you can write customize validation code before this run within submitHandler function scope I hope this solution is work for you

I'm trying to figure out what to do if input the name array has an index of a random token string.
It works fine without fixing the library.
It will avoid below error.

Uncaught TypeError: Cannot read properties of undefined (reading 'settings')

I found the solution:
Ex:
HTML

<form id="transport-form">
  <input type="text" name="qty[8Y8JoRtZtk]" id="qty_8Y8JoRtZtk" class="input-qty">
  <input type="text" name="qty[KpXdcWOEfK]" id="qty_KpXdcWOEfK" class="input-qty">
  <input type="text" name="qty[9cZtnHnq6J]" id="qty_9cZtnHnq6J" class="input-qty">
  <input type="text" name="qty[nCFzWUIcKW]" id="qty_nCFzWUIcKW" class="input-qty">
  <input type="submit value="submit">
</form>

JS:

setTimeout(function() {
   $('.input-qty').each(function(e) {
     $(this).rules('add', {
        required: true,
        number: true
     });
   })
}, 0);