Styling the hint on a HTML5 input field using required attribute

Question

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

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

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.

Answer 1

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.

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.

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

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

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; 
});

The HTML-structure generated by $.webshims.validityAlert.showFor looks like this:

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