使用required属性在HTML5输入字段上设置提示样式 [英] Styling the hint on a HTML5 input field using required attribute

问题描述

使用required属性时，是否可以设置HTML5输入字段上显示的提示的样式。如果您不确定我在说什么，请单击此表单上的提交而不填写任何内容。您应该有一个提示弹出窗口。

Is it possible to style the hint that appears on a HTML5 input field when using the required attribute. If you're not sure what I'm talking about click submit on this form without filling anything in. You should have a hint popup.

http://24ways.org/examples/have-a-field -day-with-html5-forms / 24ways-form.html

我检查了CSS源代码，但看不到有关提示的任何内容。

I've checked the CSS source and couldn't see anything regarding the hint.

我发现以重置方式设置div元素的样式会影响它的显示方式。但我不知道如何专门针对它。

I have found that styling the div element in a reset fashion affects how it appears. But I do not know how to target it specifically.

请注意：我不是指占位符。

Please note: I am NOT referring to a placeholder.

干杯，
托马斯。

Cheers, Thomas.

推荐答案

原因，为什么你可以用div选择器设置错误气泡的样式是Chrome 11/12中的一个错误，应该修复为较新的版本。有一些伪类来设置Chrome 12中的错误气泡（可能还有Safari6）（:: - webkit-validation-bubble等）。您可以在以下文档中找到完整的HTML结构，包括伪元素选择器和一些样式示例。

The reason, why you can style the error bubble with a div-selector is a bug in Chrome 11/12, which should be fixed in newer versions. There are some pseudoclasses to style the error bubble in Chrome 12 (and maybee in Safari6) (::-webkit-validation-bubble etc.). You can find the full HTML structure including the pseudoelement selectors and some styling examples in the following document.

请注意，这是HTML5表单约束验证和非标准的webkit扩展。如果你想在所有HTML5验证支持浏览器中使用一种方式来设置错误信息的样式，你必须使用JavaScript。

Note, that this is a webkit extension to the HTML5 form constraint validation and non-standard. If you want to use a way to style the error message in all HTML5 validation supporting browsers, you have to use JavaScript.

这个的关键原则是，你有向invalid-event添加处理程序（注意：无效事件不会冒泡）然后阻止默认交互。这将删除浏览器本机错误气泡，您可以在所有HTML5浏览器中实现自定义样式化UI。

The key principle of this, is that you have to add a handler to the invalid-event (Note: The invalid event does not bubble) and then prevent the default interaction. This will remove the browsers native error bubble and you are able to implement a custom styleable UI in all HTML5 browsers.

//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当前表单中的无效元素。如果您只想对第一个无效元素执行此操作，您可以执行以下操作：

The code above will call showError for all invalid elements in the current form. If you want to do this only for the first invalid element you can do the following:

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, $.prop(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代码如下所示：

In case you are using jQuery for your site, I would recommend using webshims lib. webshims lib implements the HTML5 constraint validation in all browsers (including IE6) and gives a simple extension for generating a simple custom styleable validation message. The JS code looks like this:

$(document).bind('firstinvalid', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

$。生成的HTML结构.webshims.validityAlert.showFor 看起来像这样：

<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>

这篇关于使用required属性在HTML5输入字段上设置提示样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！