在使用HTML5表单验证时,请尝试使用浏览器检测无效的提交/字段,而不是重新发明轮子。
监听invalid
事件以将“无效”类添加到您的表单中。添加“无效”类后,您可以使用CSS3:pseudo
选择器来样式化表单。
例如:
var myForm = document.forms.myformid;
var checkCustomValidity = function(field, msg) {
if('setCustomValidity' in field) {
field.setCustomValidity(msg);
} else {
field.validationMessage = msg;
}
};
var validateForm = function() {
checkCustomValidity(myForm.name, '');
if(myForm.name.value.length < 4) {
checkCustomValidity(
myForm.name, 'Please enter a valid Full Name, here.'
);
}
};
var styleInvalidForm = function() {
myForm.className = myForm.className += ' invalid';
}
myForm.addEventListener('input', validateForm, false);
myForm.addEventListener('keyup', validateForm, false);
myForm.addEventListener('invalid', styleInvalidForm, true);
现在,根据我们附加的“无效”类,简单地为您认为合适的样式设置表单。
例如:
form.invalid input:invalid,
form.invalid textarea:invalid {
background: rgba(255, 0, 0, .05);
border-color: #ff6d6d;
-webkit-box-shadow: 0 0 6px rgba(255, 0, 0, .35);
box-shadow: 0 0 6px rgba(255, 0, 0, .35);
}
makeDirty
不应切换脏类,而应将其保留在将来的(蓝色,无效,有效)事件函数makeDirty(e){if(!e.target .classList.contains('dirty'))e.target.classList.add('dirty'); }