override css for html5 form validation/required popup
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.
How to override HTML5 validation pop up?
You need the novalidate
attribute.
<form novalidate>
...
</form>
Form's novalidate
attribute on MDN
Styling default validation tooltip
You can not change "default tooltip" (HTML5 validation bubble) - it is determinated by browser vendor and several other params like browser language.
You can, however, prevent validation bubble - by doing something like
<input placeholder="Lorem ipsum..." required oninvalid="myCustomFunction()" />
From now on, with myCustomFunction
you can develop your own bubble.
Reference.
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="" />
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 do I trigger HTML5 validation error popup when custom validation message is set manually?
You can do so by using the .reportValidity().
Here is an example:
document.getElementById('testSubmit').addEventListener('click', (e) => { e.preventDefault(); document.getElementById('test').setCustomValidity('THIS WILL ALWAYS BE AN ERROR, how do I display this message?'); document.getElementById('test').reportValidity();});
<input id = "test" type = "email" oninput="validateInput();" required><input id = "testSubmit" type = "submit">
How to change the default message of the required field in the popover of form-control in bootstrap?
You can use setCustomValidity
function when oninvalid
event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('')
attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
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.
HTML5 form validation popup not readable in chrome and IE
I conclude that HTML5 validation is not yet matured. We should use something else.
Here is a Cromium issue where it is stated that we cannot style the error messages.
Related Topics
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
Media Queries - Mobile VS Desktop Browser
<A> with an Inner <Span> Not Triggering :Active State in Ie 8
Less CSS Set Variables in Media Query
Google Font Not Working on Safari
Flexbox VS Tables, Why Do We Need Flexbox
Change Parent Div on Input[Type=Checkbox]:Checked with CSS
Using Modulus in CSS Calc Function
Are All CSS Font-Weight Property's Values Useful
Mui - Outlined Select Label Is Not Rendering Properly
How to Get My CSS Linear Gradient to Work in Ie
How to Have Different CSS When I Print or Print Preview
100% Width Bg Images Not Extending on Horizontal Scroll