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