CSS: Using Invalid and Valid Pseudo-Class

The title is ambiguous actually, why do we want to use an invalid pseudo-class? 🤔 And is it not valid pseudo-class in CSS plenty? Why? Because.

Hi.

In form context, we can use :invalid and :valid pseudo-class to notify user if their input is either invalid or valid.

The CSS styling for the pseudo-class can be applied to:

• input tag (with exception) ✅

  ❌ Input type exception: button, submit, reset, image, hidden, file, range, color, checkbox, radio.

  It is because there is no validation is done to those particular types.

• textarea tag ✅
• select tag ✅

Let's try it combined with massive JavaScript and plenty of HTML elements. 🤣

No, it's quite straightforward actually. We can see the example below.

---

Demonstration

Please choose Option One Option two Option three Option four Option five Option six

---

Code

<style> .elements { box-sizing: border-box; padding: 1rem; line-height: 1.5; height: 56px; width: 160px; vertical-align: middle; font-size: 16px; } .inputs { border: 2px solid #000; } /* This is the implementation for [valid] state. */ .inputs:valid { background-color: rgba(0, 255, 0, 0.1); outline-color: green; } /* This is the implementation for [invalid] state. Additional .invalid class name for toggling via JS. */ .inputs:invalid, .invalid { background-color: rgba(255, 165, 0, 0.5) !important; outline-color: brown !important; } /* Tidying elements on small screen. Minimum width is 640px (160 x 4). Hence we put tolerance, 720px. */ @media (max-width: 720px) { .elements { display: block; width: 100%; margin: 0.25rem 0; } } </style> <noscript> <style> .app_container { display: none; } .noscript { text-align: center; font-size: 24px; color: brown; padding: 1rem; } </style> <p class="noscript"> Please enable JavaScript </p> </noscript> <div class="app_container"> <form method="GET" action="/p/query-string-page.html" id="form"> <input type="text" placeholder="Text input" name="text" class="elements inputs" required="true" id="textInput"> <input type="email" placeholder="Email input" name="email" class="elements inputs" required="true" id="emailInput"> <select required="true" name="selection" class="elements inputs"> <option selected="true" value="">Please choose</option> <optgroup label="Finance"> <option value="one">Option One</option> <option value="two">Option two</option> </optgroup> <optgroup label="Human Resources"> <option value="three">Option three</option> <option value="four">Option four</option> </optgroup> <optgroup label="Marketing"> <option value="five">Option five</option> <option value="six">Option six</option> </optgroup> </select> <button type="submit" class="elements">SUBMIT</button> </form> </div> <script> function formControl() { // Elements definition. const form = document.getElementById("form") const input = document.getElementById("textInput") const email = document.getElementById("emailInput") // Email address regex pattern. const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/ // Helper to check email address pattern validity. const isEmailValid = (string) => emailRegex.test(string || "") // Form submission event listener. form.onsubmit = function (event) { // Prevents default submission behaviour of the form. event.preventDefault() // Trims leading and trailing whitespace. const inputValue = input.value.trim() const emailValue = email.value.trim() // Stops execution (returns undefined) for invalid value. if ( inputValue === "" || !isEmailValid(emailValue) ) return // Replaces the input values with the ones without whitespace. input.value = inputValue email.value = emailValue // Submits form. form.submit() } // Email address input element input event listener. email.oninput = () => { const emailValue = email.value.trim() if (!isEmailValid(emailValue)) { // Invalid email address string pattern. // Adds class .invalid to the [email] input. email.classList.add("invalid") } else { // Valid email address string pattern. // Removes class .invalid from the [email] input. email.classList.remove("invalid") } } } // Runs the function. document.addEventListener("DOMContentLoaded", formControl) </script>

---

Hm 🧐 the title said "CSS". Hm.

In my defense, I have none. 🤣🤦

---

The Styling

In the demonstration visual feedback and style, we can see, the :invalid and :valid are implemented to switch between states of the browser-validated input and select tags' values.

This part:

/* This is the implementation for [valid] state. */ .inputs:valid { background-color: rgba(0, 255, 0, 0.1); outline-color: green; } /* This is the implementation for [invalid] state. Additional .invalid class name for toggling via JS. */ .inputs:invalid, .invalid { background-color: rgba(255, 165, 0, 0.5) !important; outline-color: brown !important; }

There is additional .invalid class name. It is because email address string validation performed by browser is not complete — for instance, asd@asd is valid ❓ Hence, we need to complete it using currently, commonly email address string pattern through JavaScript. And the .invalid is used for toggling states through the JavaScript.

This part:

email.oninput = () => { const emailValue = email.value.trim() if (!isEmailValid(emailValue)) { // Invalid email address string pattern. // Adds class .invalid to the [email] input. email.classList.add("invalid") } else { // Valid email address string pattern. // Removes class .invalid from the [email] input. email.classList.remove("invalid") } }

---

Email Address String Regular Expressions Pattern

It is done with this:

/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/

From this part in the JavaScript:

// Email address regex pattern. const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/ // Helper to check email address pattern validity. const isEmailValid = (string) => emailRegex.test(string || "")

Let's dissect the squiggly regular expressions pattern:

/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/

We take the pattern enclosed by the opening and closing slashes, /pattern/.

We take out the opening ^ and the closing $.

Then we split [A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,} into four parts:

1. [A-Za-z0-9._%+-]+

   ➡️ The local part (before the @) — letters, digits, and common symbols.

2. @

   ➡️ The only one symbol allowed for email address string pattern.

3. [A-Za-z0-9.-]+

   ➡️ The domain name — mustn't start with a symbol, but otherwise allows hyphens and dots.

4. \.[A-Za-z]{2,}

   ➡️ Top-level domain — must be at least 2 characters, so no .x ninniness.

The ^ and $, as in ^pattern$, means we want to match exactly that pattern, from start to end, with nothing before or after.

^ is caret — The beginning of the line/string. Example: ^Hello matches only if "Hello" is right at the start.

$ is dollar sign — The end of the line/string. Example: world$ matches only if "world" is right at the end.

^Hello world$ matches only "Hello world" from start to end.

^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$ matches only the "email address string pattern" from start to end.

A-Za-z or a-zA-Z?

A-Za-z = a-zA-Z. But, because in ASCII: A (65) to Z (90) and a (97) to z (122) — A (uppercase) is before a (lowercase) — thus I put A-Za-z. No performance difference. We naturally go with a-zA-Z from our typing habits, so, ... whichever suits us. 🤷

❌ Certainly not: a-ZA-z or A-za-Z. That is massively, certainly not recommended. It looks like it's telling regex to, Please match everything between lowercase a and uppercase Z... including characters even the keyboard avoids. The please part doesn't help to validate the intent. If it did, that would be ominously baffling. Yo, mate, wrong pattern. (Puffs 2 string cigarettes. Crosses regex arms.) Run it. Run! Eh. (Burnt motherboard.) Told you.

Interesting CSS. 🤔

---

noscript

It acts as a fallback (customisation) when the JavaScript in the browser is deactivated. As you can see:

<noscript> <style> .app_container { display: none; } .noscript { text-align: center; font-size: 24px; color: brown; padding: 1rem; } </style> <p class="noscript"> Please enable JavaScript </p> </noscript>

Within noscript tag, there are a style tag and an element, which will only be displayed (and run — the CSS) when the browser script execution functionality is turned off. It can only accommodate CSS and HTML element, no script will be executed. Because it would be hilarious if within noscript, developer could run JavaScript.

It would be like:

Barry	:	I'd like to order a burger with no lettuce, please.
Larry	:	Of course! Order away. (Taking a notebook. 📝 Anticipating. 👀)
Barry	:	I just did! 👀
Larry	:	When?

---

Thank you for visiting. 🙂

Trisha Yearwood - How Do I Live