JqueryValidate表单相同Name不校验问题解决

在使用Jquery validate中遇到一个问题，当表单元素有name相同字段时，validate只校验表单元素name第一个值是否通过校验，比如

<input type="text" name="userName"/>
<input type="text" name="userName"/>
<input type="text" name="userName"/>

<select name="favour"></select>
<select name="favour"></select>
<select name="favour"></select>

这时候，jquery validate，只会校验第一个元素，看了一下源码(https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js)，是因为它在获取form元素时，做了一层cache处理。

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, [contenteditable]" )
.not( ":submit, :reset, :image, :disabled" )
.not( this.settings.ignore )
.filter( function() {
var name = this.name || $( this ).attr( "name" ); // For contenteditable
if ( !name && validator.settings.debug && window.console ) {
console.error( "%o has no name assigned", this );
}

// Set form expando on contenteditable
if ( this.hasAttribute( "contenteditable" ) ) {
this.form = $( this ).closest( "form" )[ 0 ];
this.name = name;
}

// Select only the first element for each name, and only those with rules specified，缓存判断
if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
return false;
}
// 在这里做了一层Cache，如果下次再来相同的Name，则不会再进入validate的校验List
rulesCache[ name ] = true;
return true;
} );
},

解决办法

1. 我们可以更改源码cache的key的名字或者在Jquery页面load完毕后，修改property上的validate原型方法，它使用name可能会造成这种bug，那我们使用Id，一般Id是不会重复的，如果Id不存在，我们再使用name来做为cache的key，简单来说，就是一行代码

var name = this.id || this.name || $( this ).attr( "name" ); // For contenteditable

比原有的

var name = this.name || $( this ).attr( "name" ); // For contenteditable

多了一个 this.id 判断。

2. 页面加载完成后修改的方式：

$(function() {
if ($.validator) {
//fix: when several input elements shares the same name, but has different id-ies....
$.validator.prototype.elements = function() {
var validator = this,
rulesCache = {};
// select all valid inputs inside the form (no submit or reset buttons)
// workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
return $([]).add(this.currentForm.elements).filter(":input").not(":submit, :reset, :image, [disabled]").not(this.settings.ignore).filter(function() {
// 这里加入ID判断
var elementIdentification = this.id || this.name; ! elementIdentification && validator.settings.debug && window.console && console.error("%o has no id nor name assigned", this);
// select only the first element for each name, and only those with rules specified
if (elementIdentification in rulesCache || !validator.objectLength($(this).rules())) return false;
rulesCache[elementIdentification] = true;
return true;
});
};
}
});

记得给你name相同的表单元素添加id哦~

参考：http://www.jb51.net/article/101085.htm