override css for html5 form validation/required popup

Question

How can I override the default popup for a required field on a HTML5 form?

Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup)

The HTML

<form> <input type="text" name="name" id="name" placeholder="Name*" required="required" /> <input type="submit" /> </form> 

NOTE: You must view this with a HTML5 browser like Google Chrome or FireFox.

This link doesn't solve my question but it might make someone think outside of the box:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

Answer 1

It's impossible to change the validation style with only HTML5/CSS3.

It's part of the browser. The only attribute I figured out to change is the error message by using this example:

 document.getElementById("name").setCustomValidity("Lorum Ipsum"); 

But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshims and, of course, some CSS to style the popups.

I found that very useful example in this bug post titled Improve form validation error panel UI.

I think this is the best solution you can find and only way to override the basic (ugly) error panel.

Regards.

Answer 2

I'm not sure why, but ::-webkit-validation-bubble-message { display: none; } wouldn't work for me. I was able to get the desired result (tested in FF 19, Chrome Version 29.0.1547.76 m) by preventing the default behavior of the invalid event, which does not bubble.

  document.addEventListener('invalid', (function(){       return function(e){           //prevent the browser from showing default error bubble/ hint           e.preventDefault();           // optionally fire off some custom validation handler           // myvalidationfunction();       };   })(), true); 

Hope that helps others - I looked everywhere for this.