How to Style the Html5 Form Validation Error Messages With Css

How do you style the HTML5 form validation messages?

Update: Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050

In the latest iterations of Chrome, support has been added for pseudo selectors for these, namely;

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

For more information on these, check out the Webkit "Styling Form Controls" trac page.

Additionally, firefox has support for the element attribute x-moz-errormessage which enables you to change the text of the error message, which is something you could do in Chrome using CSS to and -webkit-validation-bubble-message. See more about x-moz-errormessage on the MDN Docs page.

As of yet, Firefox has no way to style the error bubbles.

HTML Default validation messages styling

At this point the answer seems to be that you can't style the default validation boxes.

Please if anyone has links or a solution to this please add info.

I haven't been able to find anything on this.

If someone adds a viable solution I will accept your answer.

Styling validation messages in html form

Float the text area to the left-

textarea {
  float:left;
}

new Demo http://jsfiddle.net/kevinPHPkevin/wCVK2/1/

How do I style HTML5 validation errors in Firefox

The answer is... there is no answer? I've continued searching, and I still don't see a way to style these errors in Firefox. The good news, however, is that the latest release of Firefox (16.0.1) has cleaned-up the appearance of the prompts, and removed the ugly inner rectangle (see screenshot). Still, it would be nice to style these w/ a custom color; perhaps white text on dark background, for example.

HTML5 form required attribute. Set custom validation message?

Use setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

I changed to vanilla JavaScript from Mootools as suggested by @itpastorn in the comments, but you should be able to work out the Mootools equivalent if necessary.

Edit

I've updated the code here as setCustomValidity works slightly differently to what I understood when I originally answered. If setCustomValidity is set to anything other than the empty string it will cause the field to be considered invalid; therefore you must clear it before testing validity, you can't just set it and forget.

Further edit

As pointed out in @thomasvdb's comment below, you need to clear the custom validity in some event outside of invalid otherwise there may be an extra pass through the oninvalid handler to clear it.

How can I change or remove HTML5 form validation default error messages?

This is the JavaScript solution:

 <input type="text"
    pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Please enter Alphabets.')"
    onchange="try{setCustomValidity('')}catch(e){}" />

The "onchange" event needs when you set an invalid input data, then correct the input and send the form again.
I've tested it on Firefox, Chrome and Safari.

But for Modern Browsers:

Modern browsers didn't need any JavaScript for validation.
Just do it like this:

<input type="text"
    pattern="[a-zA-Z]+"
    title="Please enter Alphabets."
    required="" />

---

Related Topics