HTML Academy · Lesson

The Constraint Validation API

Read validity states and check constraints with JavaScript.

The Constraint Validation API is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Validation Without JavaScript

HTML5 introduced built-in form validation via attributes: required, type="email", type="number", min, max, pattern, minlength, maxlength. The browser validates automatically on submit and shows error messages, with no JS required.

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>

CSS Validation Selectors

:invalid matches inputs that fail validation; :valid matches passing inputs. :user-invalid (modern) matches only after user interaction — avoiding red borders on a pristine form. Style errors with these pseudo-classes.

input:user-invalid {
  border-color: red;
}
input:user-invalid + .error {
  display: block;
}

The ValidityState Object

Every form control exposes a validity property — a ValidityState object with boolean flags: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort, etc. Inspect to decide which error to show.

const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
  showError(input, "Please enter a valid email address");
}

checkValidity Method

input.checkValidity() returns true if the value satisfies all constraints, false otherwise. form.checkValidity() checks the entire form. Useful for programmatic checks before doing AJAX or before allowing the user to advance in a wizard.

reportValidity Method

input.reportValidity() behaves like checkValidity but additionally triggers the browser's built-in tooltip and focuses the first invalid field. Use this when you want native UI for free; use checkValidity when you want fully custom error display.

Customizing Built-in Messages

Browser default messages ("Please fill out this field") may not match your tone or language. Override with input.setCustomValidity("Enter a valid coupon code"). The input becomes invalid until you clear the message with setCustomValidity("").

novalidate Disables Browser UI

Add novalidate on the form to suppress the browser's default validation behavior. Useful when implementing entirely custom error display — the form still submits whether or not it would have passed validation, so check programmatically before submitting.

Listening to invalid Events

Each control fires an invalid event when validation fails. Listen to suppress the default tooltip and display a custom message: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

Pattern with Regular Expressions

The pattern attribute holds a JavaScript regular expression that the value must match completely (no need for ^ and $ anchors — they are implicit). Pair with the title attribute to describe the expected format for users.

Server-Side Validation Still Required

HTML validation is convenience for users; it can be bypassed by anyone editing the DOM. Always re-validate on the server. HTML constraints exist for UX (instant feedback, fewer round trips), not for security.

Combining Multiple Constraints

Constraints stack: <input type="number" min="18" max="120" required step="1"> must be present, an integer, between 18 and 120. The browser exposes which specific constraint failed via the ValidityState flags so you can show the right message.

Knowledge Check

How does the :user-invalid CSS pseudo-class differ from :invalid?

Summary

Native validation attributes (required, type, pattern, min, max) plus the ValidityState API give powerful client-side validation with no JS by default. CSS :user-invalid styles errors after interaction. checkValidity/reportValidity drive programmatic checks. setCustomValidity overrides default messages. Always re-validate on the server.

Frequently asked questions

Is the “The Constraint Validation API” lesson free?

Yes — the full text of “The Constraint Validation API” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The Constraint Validation API”?

Read validity states and check constraints with JavaScript. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The Constraint Validation API” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy