jquery validate multiple text box validation with the same name

The clone method of jquery is used in the project, so that there are many text boxes with the same song name. jquery validate is used for
data validation, which results in the situation that only the first text box can be verified.

After reading various good solutions on the Internet, I practice and optimize it myself. as follows:
//This code must be quoted
 $(function(){
            if ($.validator) {
                $.validator.prototype.elements = function () {
                    var validator = this,
                            rulesCache = {};

                    // select all valid inputs inside the form (no submit or reset buttons)
                    return $(this.currentForm)
                            .find("input, select, textarea")
                            .not(":submit, :reset, :image, [disabled]")
                            .not(this.settings.ignore)
                            .filter(function () {
                                if (!this.name && validator.settings.debug && window.console) {
                                    console.error("%o has no name assigned", this);
                                }
                                //comment this line of code
                                // select only the first element for each name, and only those with rules specified
                                //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
                                //    return false;
                                //}
                                rulesCache[this.name] = true;
                                return true;
                            });
                }
            }


//The following is the form validation rule to be changed according to its own project properties
            $("#formorders").validate();

            $("[name=quantity]").each(function(){
                $(this).rules("add", {
                    required: true,
                    digits:true,
                    messages: {
                        required: "Quantity cannot be empty",
                        digits:"Please enter an integer"
                    }
                });
            });

            $("[name=descriptionstr]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "Description cannot be empty"
                    }
                });
            });

            $("[name=price]").each(function(){
                $(this).rules("add", {
                    required: true,
                  // regex: "^\d+(\.\d{2})?$" ,
                    number:true,
                    messages: {
                        required: "Price cannot be empty",
                        number:"Please enter the correct price format"
                    }
                });
               // $(this).rules("add", { regex: "^\d+(\.\d{2})?$" })
            });
           // $("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })
            $.validator.addMethod(
                    "regex",
                    function(value, element, regexp) {
                        var re = new RegExp(regexp);
                        return this.optional(element) || re.test(value);
                    },
                    "Data format error."
            );

            $("[name=loadingPort]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "Please select a port of departure"
                    }
                });
            });
            $("[name=destinationPort]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "Please select the destination port"
                    }
                });
            });



            $("[name=paymentMethod]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "Please select a payment method"
                    }
                });
            });

            $("[name=seller]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "Please select a supplier"
                    }
                });
            });

        });


Then add the method of dynamically modifying the id value in the clone method
$(".addProd").click(function() {
                    $("#clone").clone(true).insertAfter("#clone");

                    var idstr = 0;
                    $("[name=quantity]").each(function(){
                        $(this).attr("id","quantity"+idstr);
                        idstr++;

                    });
                    var id_descriptionstr=0;
                    $("[name=descriptionstr]").each(function(){
                        $(this).attr("id","descriptionstr"+id_descriptionstr);
                        id_descriptionstr++;

                    });
                    var id_price = 0;
                    $("[name=price]").each(function(){
                        $(this).attr("id","price"+id_price);
                        id_price++;

                    });
                    
                })


The button uses <button class="btn btn-primary btn-lg mr-40" type="submit" id="submitBtn">Create order</button> This kind of

text box is optional, such as: <input name="quantity" value ="" maxlength="9" class="form-control input65" type="text">

quote
  <script type="text/javascript" src="/static/lib/jquery/core/1.9.1/jquery. min.js"></script>

    <script type="text/javascript" src="common/js/plugin/validate/jquery.validate.js"></script>
These two js can be

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327028648&siteId=291194637