Dean's blog

jquery.validate.js验证插件，他提供了强大而灵活的验证功能，这都不用多说。在使用这个插件的时候，一般都是要放在<form>标签下的。但有些场景它却使用不了。比如使用datatables插件的可编辑表格时。如下图：

这些输入框是在<tr>下，这时还想使用jquery.validate.js的验证功能，就需要对它进行一些调整。

通过阅读源代码，jquery.validate.js在做初始化和验证的时候，都是取其下的form对象，比如：element.form。理想情况下，如上面的场景，只需要将form改为tr对象即可。为了通用起见，可以给这种非<form>标签验证的容器设置一个class，比如：validateContainer，于是可定义如下方法同时支持获取<form>和validateContainer的情况：

function getValidateContainer(element) {
    if ($(element).is('.validateContainer')) return element;

    var container = $(element).closest('.validateContainer')[0];
    container = container || element.form;
    return container;
}

将jquery.validate.js中类似element.form和this.form的全部替换为使用getValidateContainer方法。另外找到以下代码：

valid: function() {
	var valid, validator, errorList;

	if ( $( this[ 0 ] ).is( "form" ) ) {
		valid = this.validate().form();
	} else {
		errorList = [];
		valid = true;
		validator = $( this[ 0 ].form ).validate();
		this.each( function() {
			valid = validator.element( this ) && valid;
			errorList = errorList.concat( validator.errorList );
		});
		validator.errorList = errorList;
	}
	return valid;
},

调整为：

valid: function() {
	var valid, validator, errorList;

	if ( $( this[ 0 ] ).is( "form" ) || $(this[0]).is('.validateContainer') ) {
		valid = this.validate().form();
	} else {
		errorList = [];
		valid = true;
		validator = $( this[ 0 ].form || getValidateContainer($(this))).validate();
		this.each( function() {
			valid = validator.element( this ) && valid;
			errorList = errorList.concat( validator.errorList );
		});
		validator.errorList = errorList;
	}
	return valid;
},

至此，就可以让插件支持非<form>标签验证了。

调整后的文件可从这里下载：

jquery.validate.mirthsoft.zip (11.44 kb)