How to check if an input is empty with CSS

Zell Liew
Zell Liew
Dec 28, 2018 · 6 min read

Is it possible to know if an input is empty with only CSS?

I had that question when I tried to make an autocomplete component for Learn JavaScript. Basically, I wanted to:

  1. Hide a drop-down if the input is empty
  2. Show the drop-down if the input is filled
Image for post
Image for post

I found a way to do it. It’s not perfect. There are a few nuances involved, but I want to share it with you.

The form

<form>
<label for="input"> Input </label>
<input type="text" id="input" />
</form>

When the input is filled, we want to change its border-color to green. Here’s an example of what we’re creating:

Image for post
Image for post

Checking if the input is empty

<form>
<label> Input </label>
<input type="text" name="input" id="input" required />
</form>

At this point, it worked fine when the input was filled. Borders turned green.

Image for post
Image for post

But there was a problem: if the user enters a whitespace into the field, the borders turn green too.

Image for post
Image for post

Technically, this is correct. The input is filled because the user typed something into it.

But I didn’t want whitespaces to trigger a blank dropdown menu (for the autocomplete component).

It wasn’t enough. I needed a more stringent check.

Further checks

Since I didn’t want whitespaces to be recognized, I started with the \S+ pattern. This pattern meant: One or more characters that’s not a whitespace.

<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern="\S+"/>
</form>

Sure enough, it worked. If a user enters a whitespace into the field, the input doesn’t get validated.

Image for post
Image for post

But when a whitespace is entered (anywhere) into the input, the input gets invalidated.

Image for post
Image for post

Unfortunately, this pattern didn’t work in my use case.

In Learn JavaScript’s autocomplete component, I taught students how to complete a list of countries. The names of some countries had spaces…

Image for post
Image for post

I had to include whitespaces in the mix.

The next best alternative I could think of is \S+.*. This means 1 or more non-whitespace characters, followed by zero or more (any) characters.

<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern="\S+.*"/>
</form>

This worked! I can enter whitespaces into the mix now!

Image for post
Image for post

But there’s one more problem… the input doesn’t validate if you START with a whitespace…

Image for post
Image for post

And that’s the problem I couldn’t resolve. More on this later.

When I worked on this article, I came across another interesting question: Is it possible to style an invalid state when the input is filled incorrectly?

Invalidating the input

This is where Chris Coyier swooped in to the rescue with “ Form Validation UX in HTML and CSS”.

In the article, Chris talks about a :placeholder-shown pseudo-class. It can be used to check whether a placeholder is shown.

The idea is:

  1. You add a placeholder to your input
  2. If the input is hidden, it means the user typed something into the field
  3. Proceed with validation (or invalidation)

Here’s the CSS (simplified version. For the complete version, check out Chris’s article.)

/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);
}

Since I had both validation AND invalidation styles, I had to ensure the valid styles came after the invalid styles.

/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);;
}
/* Show green borders when valid */
input:valid {
border-color: hsl(120, 76%, 50%);
}

Here’s a demo for you to play with:

See the Pen Pure CSS Empty validation by Zell Liew (@zellwk) on CodePen.

Note: Edge doesn’t support :placeholder-shown, so it’s probably not a good idea to use it in production yet. There’s no good way to detect this feature.

Now back to the problem I couldn’t resolve.

The problem with pattern

But… the regular expression must match the text completely. If the text doesn’t get matched completely, the input gets invalidated.

This created the problem I mentioned above. (Reminder of the problem: If a user enters a whitespace first, the input becomes invalid).

I couldn’t find a regular expression that worked for all use-cases that I thought of. If you want to try your hand at creating a regular expression that I need, I’d be more than happy to receive the help!

Here are the use-cases:

// Should not match
''
' '
' '
' '
// Should match
'one-word'
'one-word '
' one-word'
' one-word '
'one phrase with whitespace'
'one phrase with whitespace '
' one phrase with whitespace'
' one phrase with whitespace '

(Then again, I might be overthinking it… 🙄).

Update: Problem solved!

The cleanest solution I received is: .*\S.* by Daniel O’Connor. This means:

  • .*: Any character
  • \S: Followed one non-whitespace character
  • .*: Followed by any character

Other regexes I received include:

And many others!

Here’s a codepen with the updated solution by Daniel.

Wrapping up

If you don’t mind the whitespaces, it works perfectly. Have fun trying this pattern out! (Sorry, I can’t help it).

Thanks for reading. Did this article help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!

This article was originally posted at my blog. Sign up for my newsletter if you want more articles to help you become a better front-end developer.

freeCodeCamp.org

This is no longer updated.

Zell Liew

Written by

Zell Liew

Frontend consultant; teaching frontend to self-taught devs at zellwk.com. Currently attempting to demystify Javascript at https://learnjavascript.today

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Zell Liew

Written by

Zell Liew

Frontend consultant; teaching frontend to self-taught devs at zellwk.com. Currently attempting to demystify Javascript at https://learnjavascript.today

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store