记一次jquery validate的扩展(第一次失去焦点时触发校验)

原创
2018/10/21 17:50
阅读数 466

最近在用jquery.validate 做前端表单校验,但是发现每次第一次失去焦点时,如果文本框内容为空,且该字段是必填项

则不会触发校验,直到提交表单后,再次失去焦点时,才会触发,想对此进行扩展,第一次失去焦点时也触发校验(即使文本框未空)。

 

看了下代码,找到失去焦点事件,发现一共有3个条件,

onfocusout: function( element ) {
			if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
				this.element( element );
			}
		},

第一个条件,是判断该表单元素是不是选择性的控件,例如单选,多选。 这种的话就无法校验了。

第二个条件是 判断该元素是否在 submitted 中

第三个条件是 判断该元素是否是非必填项。即该元素的值如果非空,则是必填项,需要校验,如果是空的话,就是非必填项。

 

第一个和第三个条件的逻辑都没问题,关键在第二个条件, 发现第一次的时候,submitted是空的,而submitted是在触发整个表单校验时才初始化的,显然这个有点晚了。

于是参考网上的一片文章(见下)改了下,首先判断该元素是否是必填项,如果是则校验。    OK了。

$.extend(true, $.validator, {
        defaults: {
            onfocusout: function (element, event) {
            	
            	if (element.value == "") {//此部分为修改的代码
                    if ($(element).rules().required == true) { 
                        $(element).valid();
                    }
                } else {
	                if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
	                    this.element(element);
	                }
                }
            	
            }
        }
	});

 

参考:

解决jquery.validate.js的验证bug

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部