JQuery validate 插件在验证/校验 表单的时候,是不校验带有readonly,disabled,:reset(type= reset),:submit,:image 等标签的,有俩个方案。
方案一:需要更改js,在":submit, :reset, :image, [disabled], [readonly]"里将相应标签删除即可
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")
.not(":submit, :reset, :image, [disabled], [readonly]")
.not( this.settings.ignore )
.filter(function() {
if ( !this.name && validator.settings.debug && window.console ) {
console.error( "%o has no name assigned", this);
}
// select only the first element for each name, and only those with rules specified
if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
return false;
}
rulesCache[this.name] = true;
return true;
});
},
方案二:仅限 readonly属性(disabled不可行)
disabled只能校验一次(当鼠标没有移上去的时候),校验后光标自动停留该input,再点提交不会校验了
原因:disabled的元素是不会触发事件的
我们不要直接在标签中加入 readonly 属性,我们使用JS事件,动态处理。
area绑定 focusin事件, 当焦点落在输入框上时,我们添加上readonly属性设置为true,使用户无法输入,移除时,设置为false。这样validate插件就可以验证了。
// 解决validate 与 readonly 冲突问题
$('#area').on("focusin",function() {
$(this).prop('readonly', true);
});
$('#area').on("focusout",function() {
$(this).prop('readonly', false);
});