DEV Community

Cover image for Form input validation WITHOUT JavaScript
JoelBonetR ๐Ÿฅ‡
JoelBonetR ๐Ÿฅ‡

Posted on โ€ข Edited on

21 7 1

Form input validation WITHOUT JavaScript

I promised it and here it is,

BEHOLD!

Quick Explanation

We need 2 things here:

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

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>


Enter fullscreen mode Exit fullscreen mode

css



input:valid { color: green }
input:invalid { color: red }


Enter fullscreen mode Exit fullscreen mode

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!

jetpack

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (8)

Collapse
 
j3ffjessie profile image
J3ffJessie โ€ข

Please be advised that use of the #discuss tag doesnโ€™t fit this post. This post isnโ€™t for discussion but more of a follow up post to a previous post. Please only use #discuss tag for posts where discussion is imperative to the posts content.

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ โ€ข โ€ข Edited

Agree, my bad
I planned to set a question for those awesome UX engineers around here to discuss about that but maybe a new post with proper questions around the topic will suit better, thank you for pointing it out! ๐Ÿ˜

Collapse
 
sem1colons profile image
Youssef Abdulaziz โ€ข

But is it usable in real product ? I mean I could just inspect it , change the pattern to whatever and submit my arbitrary input right?

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ โ€ข โ€ข Edited

Yes sure!
The same way you can disable JS in your browser, send a request using Postman directly to the endpoint or anything else.

Client code is loaded and running inside third party machines, hence you can't rely in frontend validations in any app. You'll need to re-validate the whole in backend anyway.

Validations in the frontend have 2 purposes:

  1. Give feedback to the user as soon as possible.
  2. Avoid requests to your server if the data that the user is about to send is not valid.

So yes, it's usable in a real product. If you do that and submit wrong data, the backend will throw an error about that and we should be good ๐Ÿ˜‚

Collapse
 
sem1colons profile image
Youssef Abdulaziz โ€ข

Wow, listening to experience is far more useful than to my rookie mind ๐Ÿ˜‚๐Ÿ˜‚๐Ÿ˜‚...thanks very much.

Thread Thread
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ โ€ข

๐Ÿ˜‚ No problem, we all have to walk -almost- the same road! ๐Ÿ˜

Collapse
 
bwca profile image
Volodymyr Yepishev โ€ข

That's actually amazing :)

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ โ€ข

Thank you! ๐Ÿ˜

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

๐Ÿ‘ฅ Ideal for solo developers, teams, and cross-company projects

Learn more