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