JQuery.validate() 的重复name表单验证

背景

业务需求中，需要在表单中自定义添加多行新增列表，这时候生成的表单就会存在多name相同的问题，JQuery.validate() 验证则是通过name去进行校验的。

首先解决相同name校验问题：

if ($.validator) {
        $.validator.prototype.elements = function () {
                var validator = this,
                  rulesCache = {};
                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);
                    }
                    rulesCache[this.name] = true;
                    return true;
                });
        }
}

这块可解决相同name校验的问题；

但是同时你发现，即使相同的name完成了校验，但校验提示错位。

看下jquery-validation源码，可以发现：

// validation验证错误是会在输入框下方生成一个<label class="error">的标签
errorsFor: function( element ) {
    var name = this.idOrName(element);  // 获取当前<input>标签的name属性
    return this.errors().filter(function() {  // 获取所有"label error"标签，根据条件进行过滤
        return $(this).attr("for") === name;
    });
},
showLabel: function( element, message ) {
    var label = this.errorsFor( element );
    if ( label.length ) {
        // label存在，则将label的class属性由this.settings.validClass（默认：valid）替换成this.settings.errorClass（默认：error）
    } else {
        // 不存在，则创建一个label标签添加到当前input后面
    }
}

这时很明显，对于我们的需求，需重新改写errorsFor方法即可：

$.validator.prototype.errorsFor = function( element ) {
    return $(element).next();
}