yanyiping 2017-02-03
项目中用到了jquery的clone方法使得出现很多歌name一样的文本框
数据验证用的jqueryvalidate这样就造成只能验证第一个文本框的情况
网上看了下各个好的解决方案亲身实践优化后总结如下:
//这个代码必须要引用 $(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); } //注释这行代码 // 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; }); } } //下面是表单验证规则 根据自己 项目属性进行更改 $("#formorders").validate(); $("[name=quantity]").each(function(){ $(this).rules("add", { required: true, digits:true, messages: { required: "数量不能为空", digits:"请输入整数" } }); }); $("[name=descriptionstr]").each(function(){ $(this).rules("add", { required: true, messages: { required: "描述不能为空" } }); }); $("[name=price]").each(function(){ $(this).rules("add", { required: true, // regex: "^\d+(\.\d{2})?$" , number:true, messages: { required: "价格不能为空", number:"请输入正确的价格格式" } }); // $(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); }, "数据格式错误." ); $("[name=loadingPort]").each(function(){ $(this).rules("add", { required: true, messages: { required: "请选择起运港" } }); }); $("[name=destinationPort]").each(function(){ $(this).rules("add", { required: true, messages: { required: "请选择目地港" } }); }); $("[name=paymentMethod]").each(function(){ $(this).rules("add", { required: true, messages: { required: "请选择支付方式" } }); }); $("[name=seller]").each(function(){ $(this).rules("add", { required: true, messages: { required: "请选择供应商" } }); }); });
然后在克隆方法里增加动态修改id值得方法
$(".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++; }); })
按钮用<buttonclass="btnbtn-primarybtn-lgmr-40"type="submit"id="submitBtn">创建订单</button>这种
文本框随意比如:<inputname="quantity"value=""maxlength="9"class="form-controlinput65"type="text">
引用
<scripttype="text/javascript"src="/static/lib/jquery/core/1.9.1/jquery.min.js"></script>
<scripttype="text/javascript"src="common/js/plugin/validate/jquery.validate.js"></script>
这两个js即可