Form input validation WITHOUT JavaScript

August 15, 2022

I promised it and here it is,


Quick Explanation

We need 2 things here:

  1. The pattern html attribute
  2. Some CSS pseudos like :valid and :invalid


The pattern attribute allows us to specify a regular expression that the inputted value must match in order to be considered valid.

: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


  <label for="choose">Would you prefer tea or coffee?</label>
  <input id="choose" name="i_like" required pattern="[Tt]ea|[Cc]offee">
Enter fullscreen modeExit fullscreen mode


input:valid { color: green }
input:invalid { color: red }
Enter fullscreen modeExit fullscreen mode


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 codepen, check the CSS! 😁

Also bookmark this for reference whenever you need it:

Till the next one!


Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *