不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

让jQuery.Validate.js插件支持非form标签验证

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)

不允许评论
粤ICP备17049187号-1