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)