Chapter 27: Form Validation & Constraint Validation API

CSS Validation Pseudo-Classes

Styling Dynamic Form States: Mastering `:valid`, `:invalid`, `:user-valid`, `:user-invalid`, and Eliminating Premature Errors

LEARNING OBJECTIVES ⌵

Differentiate eager evaluation (:valid, :invalid) from interaction-aware evaluation (:user-valid, :user-invalid).
Eliminate the "Red Form on Initial Page Load" anti-pattern using modern CSS pseudo-classes.
Master the complete family of CSS form state selectors (:required, :optional, :in-range, :out-of-range, :placeholder-shown).
Architect resilient component styles using modern CSS :has() parent selectors for contextual label and icon changes.
Implement progressive enhancement fallbacks for legacy rendering engines.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine taking a driving test with two very different examiners:

+-----------------------------------------------------------------------------+
|                        THE DRIVING EXAMINER ANALOGY                         |
+-----------------------------------------------------------------------------+
|                                                                             |
|   EXAMINER A: The Eager Critic (:invalid)                                   |
|   • You sit in the car. The key is not even in the ignition.                |
|   • Examiner screams: 🛑 "FAIL! You haven't parallel parked yet!"           |
|   • Terrible User Experience! You haven't even touched the pedals!          |
|                                                                             |
|   EXAMINER B: The Observant Examiner (:user-invalid)                         |
|   • Patiently waits while you start the car and begin driving.              |
|   • Only grades you AFTER you attempt to park and step out of the car.      |
|   • 🟢 Green checkmark on success, 🔴 Red feedback only after mistake.     |
|                                                                             |
+-----------------------------------------------------------------------------+

In early web development, CSS only provided :invalid. Because an empty required field is technically invalid from the moment the DOM loads, writing input:invalid { border-color: red; } caused forms to render covered in screaming red error borders before the user ever typed a single letter!

Modern CSS (Selectors Level 4) introduced :user-invalid and :user-valid. These pseudo-classes are interaction-aware: they stay silent while a form is pristine, activating only after the user interacts with the field or attempts submission.

Technical Deep Dive & Specifications

2.1 The CSS Form Pseudo-Class Ecosystem

Under the W3C Selectors Level 4 Specification, browser engines track validation state in tandem with user interaction state:

+----------------------------------------------------------------------------------------------------+
|                                    CSS VALIDATION SELECTORS MATRIX                                 |
+----------------------------------------------------------------------------------------------------+

 PSEUDO-CLASS         EVALUATION TRIGGER                                UX SUITABILITY
 ───────────────────────────────────────────────────────────────────────────────────────────────────
 :valid               Matches immediately if validity.valid == true      ⚠️ Triggers on load (Use carefully)
 :invalid             Matches immediately if validity.valid == false     ⛔ AVOID for direct error styling!
 :user-valid          Matches ONLY after user interaction + valid        ⭐ RECOMMENDED for success UI
 :user-invalid        Matches ONLY after user interaction + invalid      ⭐ RECOMMENDED for error UI
 :required            Matches if element has required attribute          ✅ Great for optional/required badges
 :optional            Matches if element lacks required attribute        ✅ Great for muted labels
 :in-range            Matches if number/date is within min/max bounds    ✅ Great for numeric step meters
 :out-of-range        Matches if number/date violates min/max bounds     ✅ Great for numeric overflow alerts
 :placeholder-shown   Matches when placeholder text is visible           💡 Useful for floating label animations

2.2 When Does `:user-invalid` Fire?

A control matches :user-invalid if:

The control's validity.valid is false, AND
The user has explicitly interacted with it (typed content and moved focus away via blur), OR the user attempted to submit the enclosing <form>.

+----------------------------------------------------------------------------------------------------+
|                                     THE USER INTERACTION LIFECYCLE                                 |
+----------------------------------------------------------------------------------------------------+

 STATE                   INPUT VALUE            :invalid           :user-invalid
 ─────────────────────────────────────────────────────────────────────────────────
 1. Page Initial Load    "" (Required)          MATCHES (Red)      DOES NOT MATCH (Quiet)
 2. User Focuses & Types "abc" (minlength=5)    MATCHES (Red)      DOES NOT MATCH (Typing...)
 3. User Tabs Away (Blur) "abc" (3 < 5)          MATCHES (Red)      MATCHES (Red Error Shown!)
 4. User Returns & Types "abcdef" (6 >= 5)      DOES NOT MATCH     DOES NOT MATCH (:user-valid!)

2.3 Container Styling with Modern CSS `:has()`

Using CSS :has(), you can style the parent .form-group, labels, and surrounding icon indicators based on child validation states without writing JavaScript:

/* Style label color when input is invalid after user interaction */
.form-group:has(input:user-invalid) label {
  color: #f43f5e;
}

/* Reveal error message span only when input is user-invalid */
.error-msg {
  display: none;
  color: #f43f5e;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

input:user-invalid + .error-msg {
  display: block;
  animation: fadeIn 0.2s ease-in;
}

/* Subtle success indicator */
input:user-valid {
  border-color: #22c55e;
}

💻 Interactive Code Playground

Starter Code

The following comparison playground displays two identical forms side by side: one styled with naive :invalid, and one styled with modern :user-invalid.

Line-by-Line Code Breakdown

Lines 50-56 (.naive-form input:invalid): Targets the eager pseudo-class :invalid. Because pristine required fields are empty, they match immediately, painting the form in screaming red on load.
Lines 61-71 (.modern-form input:user-invalid): Targets :user-invalid. The browser leaves these fields unstyled until the user has typed invalid content and blurred the input, or clicked submit.
Lines 73-80 (.modern-form input:user-invalid + .msg): Automatically displays the helper message .msg only when the preceding input matches :user-invalid.
Line 70 (input:user-valid): Renders a crisp green success indicator only after the user has successfully entered valid input.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Validation Pseudo-Classes</title>
  <style>
    :root {
      --bg: #0f172a;
      --card: #1e293b;
      --border: #334155;
      --accent: #38bdf8;
      --error: #f43f5e;
      --success: #22c55e;
      --text: #f8fafc;
      --muted: #94a3b8;
    }

* { box-sizing: border-box; font-family: system-ui, sans-serif; }
    body { background: var(--bg); color: var(--text); padding: 2rem; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
    
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 900px; width: 100%; }
    
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.75rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    }

h3 { margin-bottom: 0.25rem; }
    h3.bad { color: var(--error); }
    h3.good { color: var(--success); }
    p.desc { font-size: 0.8rem; color: var(--muted); margin-bottom: 1.25rem; min-height: 2.5rem; }

.form-group { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
    label { font-size: 0.875rem; font-weight: 600; }
    
    input {
      background: #0b1120;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      padding: 0.75rem;
      font-size: 0.95rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    input:focus { outline: none; border-color: var(--accent); }

/* ========================================================= */
    /* 1. NAIVE FORM: Eager :invalid (Causes Red Form on Load)   */
    /* ========================================================= */
    .naive-form input:invalid {
      border-color: var(--error);
      background-color: rgba(244, 63, 94, 0.05);
    }
    .naive-form input:valid {
      border-color: var(--success);
    }

/* ========================================================= */
    /* 2. MODERN FORM: Interaction-Aware :user-invalid           */
    /* ========================================================= */
    .modern-form input:user-invalid {
      border-color: var(--error);
      background-color: rgba(244, 63, 94, 0.05);
      box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
    }
    .modern-form input:user-valid {
      border-color: var(--success);
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
    }

.modern-form .msg {
      display: none;
      font-size: 0.75rem;
      color: var(--error);
      margin-top: 0.25rem;
    }
    .modern-form input:user-invalid + .msg {
      display: block;
    }

button {
      background: var(--accent);
      color: #0b1120;
      font-weight: 700;
      border: none;
      border-radius: 6px;
      padding: 0.75rem;
      width: 100%;
      cursor: pointer;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>

<div class="grid">
    
    
    <div class="card naive-form">
      <h3 class="bad">❌ Naive (:invalid)</h3>
      <p class="desc">Notice how empty required fields are already styled in RED errors on page load before you even touch them.</p>

<form onsubmit="event.preventDefault();">
        <div class="form-group">
          <label for="naive-email">Work Email *</label>
          <input type="email" id="naive-email" required placeholder="name@company.com" />
        </div>

<div class="form-group">
          <label for="naive-pin">4-Digit PIN *</label>
          <input type="text" id="naive-pin" required pattern="\d{4}" placeholder="1234" />
        </div>

<button type="submit">Submit Naive</button>
      </form>
    </div>

<div class="card modern-form">
      <h3 class="good">✅ Modern (:user-invalid)</h3>
      <p class="desc">Inputs stay neutral until you interact and make a mistake, or attempt form submission.</p>

<form onsubmit="event.preventDefault();">
        <div class="form-group">
          <label for="mod-email">Work Email *</label>
          <input type="email" id="mod-email" required placeholder="name@company.com" />
          <span class="msg">Please enter a valid email address.</span>
        </div>

<div class="form-group">
          <label for="mod-pin">4-Digit PIN *</label>
          <input type="text" id="mod-pin" required pattern="\d{4}" placeholder="1234" />
          <span class="msg">PIN must be exactly 4 digits.</span>
        </div>

<button type="submit">Submit Modern</button>
      </form>
    </div>

</div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+------------------------------------+  +------------------------------------+
| ❌ Naive (:invalid)                |  | ✅ Modern (:user-invalid)          |
| Notice how empty fields are RED... |  | Inputs stay neutral until typed... |
|                                    |  |                                    |
| Work Email *                       |  | Work Email *                       |
| [ 🔴 (Already Red on Page Load)  ] |  | [ ⚪ (Clean & Neutral)           ] |
|                                    |  |                                    |
| 4-Digit PIN *                      |  | 4-Digit PIN *                      |
| [ 🔴 (Already Red on Page Load)  ] |  | [ ⚪ (Clean & Neutral)           ] |
|                                    |  |                                    |
| [ Submit Naive                   ] |  | [ Submit Modern                  ] |
+------------------------------------+  +------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Production Billing Card with CSS-Only Feedback

Scenario: Build a responsive credit card billing form with zero JavaScript validation logic.

Cardholder Name: Required text input.
Card Number: Required, 16 digits (pattern="\d{16}").
CVV Code: Required, 3 or 4 digits (pattern="\d{3,4}").
Billing ZIP: Required, 5 digits (pattern="\d{5}").

Instructions:

Structure the semantic HTML markup.
Use CSS :user-invalid to display red borders and reveal error messages.
Use CSS :user-valid to display green borders.
Use CSS :has(input:user-invalid) to turn the corresponding label text red.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Validation Solution</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: white; padding: 2rem; }
    .card { max-width: 440px; margin: 0 auto; background: #1e293b; padding: 1.5rem; border-radius: 12px; border: 1px solid #334155; }
    
    .field { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 4px; }
    label { font-size: 0.875rem; font-weight: bold; transition: color 0.2s; }
    
    input {
      background: #0b1120;
      border: 1.5px solid #334155;
      color: white;
      padding: 10px;
      border-radius: 6px;
      font-size: 1rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    input:focus { outline: none; border-color: #38bdf8; }

    /* Modern Pseudo-Classes */
    .field:has(input:user-invalid) label { color: #f43f5e; }
    .field:has(input:user-valid) label { color: #22c55e; }

    input:user-invalid {
      border-color: #f43f5e;
      box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.2);
    }
    input:user-valid {
      border-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    .error-text {
      display: none;
      font-size: 0.75rem;
      color: #f43f5e;
      font-weight: 500;
    }
    input:user-invalid + .error-text {
      display: block;
    }

    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    button { background: #38bdf8; color: #0b1120; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1rem; margin-top: 0.5rem; }
  </style>
</head>
<body>
  <div class="card">
    <h2 style="margin-top:0;">Payment Details</h2>
    <form id="billingForm">
      
      <div class="field">
        <label for="cname">Cardholder Name *</label>
        <input type="text" id="cname" name="cname" required pattern=".*\S+.*" placeholder="Jane Doe" />
        <span class="error-text">Please enter the cardholder name.</span>
      </div>

      <div class="field">
        <label for="cnum">16-Digit Card Number *</label>
        <input type="text" id="cnum" name="cnum" required pattern="\d{16}" inputmode="numeric" placeholder="4532889911223344" />
        <span class="error-text">Card number must be exactly 16 digits.</span>
      </div>

      <div class="row">
        <div class="field">
          <label for="cvv">CVV *</label>
          <input type="text" id="cvv" name="cvv" required pattern="\d{3,4}" inputmode="numeric" placeholder="123" />
          <span class="error-text">3 or 4 digits.</span>
        </div>

        <div class="field">
          <label for="zip">Billing ZIP *</label>
          <input type="text" id="zip" name="zip" required pattern="\d{5}" inputmode="numeric" placeholder="90210" />
          <span class="error-text">5-digit ZIP.</span>
        </div>
      </div>

      <button type="submit">Authorize Payment</button>
    </form>
  </div>
</body>
</html>

Why this works: Using CSS :user-invalid ensures error borders and messages stay completely hidden until the customer engages with each input. The :has(input:user-invalid) selector recolors the parent label automatically, all with zero lines of JavaScript.

⚠️ Common Pitfalls

Styling :invalid Directly: Writing input:invalid { border: 2px solid red; }. This guarantees that pristine forms will look broken immediately on load. Always prefer :user-invalid.
Neglecting :user-valid Contrast: Making :user-valid bright neon green on large inputs can cause visual noise. Keep success styles subtle (e.g. A subtle 1px border or green checkmark icon).
Not Pairing with input:focus: If a user is actively typing, you may want to suppress error borders until they finish and blur. :user-invalid:not(:focus) prevents errors from displaying mid-keystroke.

💡 Pro Tips

Container Styling with :has(): Leverage .group:has(:user-invalid) to alter parent backgrounds, icons, and typography without DOM manipulation libraries.
Floating Labels with :placeholder-shown: Combine :placeholder-shown with :user-invalid to build floating label patterns that seamlessly transition into error states.

📌 Key Takeaways

:valid & :invalid: Eager pseudo-classes that match immediately upon DOM load, often creating bad UX on pristine required fields.
:user-valid & :user-invalid: Interaction-aware pseudo-classes that only activate after user interaction (blur/edit) or form submission attempts.
:has() Synergy: Use .form-group:has(:user-invalid) to style labels and container elements in pure CSS.
:required & :optional: Selectors for differentiating mandatory vs optional form controls.
Clean DOM Errors: Sibling selector input:user-invalid + .error-msg { display: block; } enables zero-JS accessible error message toggling.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Why is styling `input:invalid { border-color: red; }` considered a poor UX practice?

Topic: HTML Fundamentals

? Question 2 / 3

Under what condition does an input match the `:user-invalid` pseudo-class?

Topic: HTML Fundamentals

? Question 3 / 3

How can you style the parent `<label>` element red when its child `<input>` is `:user-invalid` in pure CSS?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

2.1 The CSS Form Pseudo-Class Ecosystem

2.2 When Does :user-invalid Fire?

2.3 Container Styling with Modern CSS :has()

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Production Billing Card with CSS-Only Feedback

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why is styling input:invalid { border-color: red; } considered a poor UX practice?

Under what condition does an input match the :user-invalid pseudo-class?

How can you style the parent <label> element red when its child <input> is :user-invalid in pure CSS?

2.2 When Does `:user-invalid` Fire?

2.3 Container Styling with Modern CSS `:has()`

Why is styling `input:invalid { border-color: red; }` considered a poor UX practice?

Under what condition does an input match the `:user-invalid` pseudo-class?

How can you style the parent `<label>` element red when its child `<input>` is `:user-invalid` in pure CSS?