jquery validation with identical form names create single error messages

Question

I have a form where a set of form fields can be added and removed dynamically (using javascript) and therefore use array values for the names (example: id="namesupplier[]") to pass them via ajax.

My issue relates to using jquery validate() - similar as described in Jquery Validation with Identical Form Names. I also used the solution suggested by JAB (second solution) on that page, but it does not work completely; when entering a wrong value in for example a form field of the second (third, etc) set, the error message always pops up at the form field in the first set (The error box related to the form field in the second (third) set does indicate the error color as expected, but without the message)

Any idea how to solve this?

Code adding & removing form fields (getProductconfigform() returns a string with all formfields of one set; each form field with name=anarrayvalue[]))

 <script src="js/jquery-1.10.1.min.js"></script>
 <script src="js/productconfigform1.js"></script>
 <script>
        //!max of 5 energy electricity products!
        //values of these variables are posted to server (in $_POST paremters)

        var form = getProductconfigform(); //create a  string with the product forms

        var NUMBER_OF_FORMS = 8;

        //script for adding and removing productss
        $(document).ready (function () {
            $('.btnAdd').click (function () {     
                $('.buttons').append(form); // end append
                $('div .btnRemove').last().click (function () { 
                    $(this).parent().last().remove();    
                }); // end click
            }); // end click                

        }); // end ready
 </script>

Code with jquery validate() function:

<script>
$(function() {

    $("#myForm").validate({

    rules: {
            // simple rule, converted to {required:true}


            "productname[]": {
                required:true,
                minlength: 2,
                maxlength: 30,
            },


            "energyunitinv[]": {
                required:true,
                number: true,
                maxlength: 8,
            }


            } //rules
    }); //validate()

}); //function

</script>

Code of mentioned javascript function getProductconfigform() which returns a string with all formfields:

function getProductconfigform()
{
 var form;

 form = '<div>\<p> Product - algemeen </p>\
        <label class="field2" for="productname[]"> Product naam </label> <input     id="productname[]" type="text" name="productname[]"> <br>\
        <label class="field2" for="eproducttype[]"> Product type</label> <select name="eproducttype[]"> \

 <input type="button" class="btnRemove" value="Remove"><br></div>';

 return form;
}

Answer 1

I have a few suggestions:

You are adding validation to the same form all the time:

$("#myForm").validate(...)

Add a class to every form so you can do this: $(".myFormClass").validate(...)

You should not add forms with the same ID (myform) to the page, that will result in invalid HTML. You don't have to add IDs to the forms for example, or you could add a number to the end of the id, so myForm1, myForm2, ... will be the ID.

I don't think this is an array "productname[]", it is a name with square brackets in it, so it makes no difference whatsoever.