使用所需属性时,可以对
HTML5输入字段上显示的提示设置样式.如果您不确定我在说什么,点击提交此表单,而不填写任何内容.您应该有一个提示弹出窗口.
http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html
我发现,以重置的方式对div元素进行样式会影响它的出现.但我不知道如何专门针对它.
请注意：我不是指占位符.
干杯,
托马斯.
解决方法
原因,为什么您可以使用div选择器来设计错误泡沫,这是Chrome 11/12中的一个错误,应该是
fixed in newer versions.有一些伪类可以在Chrome 12(和Safari6中的maybee)(:: – webkit-validation-bubble等)中设置错误气泡.您可以在
following document中找到完整的HTML结构,包括伪元素选择器和一些样式示例.
请注意,这是HTML5表单约束验证和非标准的Webkit扩展.如果您想使用所有HTML5验证支持浏览器中的错误消息样式,您必须使用JavaScript.
这样做的关键原则是您必须向无效事件添加一个处理程序(注意：无效事件不起泡),然后防止默认的交互.这将删除浏览器本机错误泡泡,并且您可以在所有HTML5浏览器中实现自定义风格的UI.
//Note: that we use true for useCapture,because invalid does not bubble
document.addEventListener('invalid',function(e){
//prevent the browser from showing his error bubble
e.preventDefault();
//now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
showError(e.target,$.prop(e.target,'validationMessage');
},true);
上面的代码将为当前窗体中的所有无效元素调用showError.如果您只想对第一个无效元素执行此操作,则可以执行以下操作：
document.addEventListener('invalid',(function(){
var isFirst = true;
return function(e){
//prevent the browser from showing his error bubble
e.preventDefault();
//now you can implement your own validation UI
if(isFirst){
showError(e.target,'validationMessage');
//set isFirst to false
isFirst = false;
//reset isFirst to true,so user can try to submit invalid forms multiple times
setTimeout(function(){
isFirst = true;
},9);
}
};
})(),true);
如果您为您的网站使用jQuery,我建议使用webshims lib. webshims lib在所有浏览器(包括IE6)中实现HTML5约束验证,并为生成简单的自定义样式验证消息提供了简单的扩展. JS代码如下所示：
$(document).bind('firstinvalid',function(e){
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing native validation message
return false;
});
$.webshims.validityAlert.showFor生成的HTML结构如下所示：
<span class="validity-alert" role="alert">
<span class="va-arrow"><span class="va-arrow-Box"></span></span>
<span class="va-Box">Error message of the current field</span>
</span>
