HTML 5 browser's pop-up on input with type="email"

Question

When you submit a form in newer browser version that supports HTML5 markup and your form has input type="email" with invalid email address value the form will not be submitted which is good. Also you will get a bubble alert that says "Please enter an email address"

A simple DEMO here.

Well, this is nice in some point. In the demo you will see that the pop-up hides my defined error. Is there a way to prevent the bubble to appear? or can i override the style of the bubble?

Answer 1

You can stop the browser's build-in validation with the attribute novalidate:

<form action="" novalidate></form>

or you can change the content of the overlay with this JavaScript-property and your own error message:

var element = [selector that selects the input field];
element.setCustomValidity('This is not a valid e-mail');

But I think you can't style this browser-element yourself.