JoelBonetR 🥇I promised it and here it is,
BEHOLD!
Quick Explanation
We need 2 things here:
Pattern
The pattern attribute allows us to specify a regular expression that the inputted value must match in order to be considered valid.
!important: You must avoid using the pattern attribute on fields that have a validation by default like <input type="email"> as the browser will validate the input according to the RFC5322 and cast to :valid or :invalid consequently) on its own.
:valid, :invalid
When used in an input, CSS considers it :valid when the regex set in the pattern attribute matches the user input on it. Otherwise it's considered :invalid.
Basic Usage
html
<form>
<label for="choose">Would you prefer tea or coffee?</label>
<input id="choose" name="i_like" required pattern="[Tt]ea|[Cc]offee">
<button>Submit</button>
</form>
css
input:valid { color: green }
input:invalid { color: red }
In this example, because the pattern regex [Tt]ea|[Cc]offee only those 4 words will be valid:
- Tea
- tea
- Coffee
- coffee
If you type any of those, the color will change to "green" on the other hand if you type anything else, it will be "red" and any attempts to submit the form will lead to a browser message.
ending
If you try to submit (thats why I left that button in the codepen) while any input in the form is not valid, it will show you a message in YOUR language. Without the need of i18n or anything else, the browser will handle that for you.
I feel this a nice approach for UX; whenever you need to give a quick feedback to the user.
You can design it your way and extend your creativity adding other CSS pseudos like:
And last but not least, you can also edit the label or another element by using the adjacent sibling selector +, which is the reason I've set the label after the input in my first codepen, check the CSS! 😁
Also bookmark this for reference whenever you need it:
Till the next one!
