How does the pattern attribute work?

pattern holds a JavaScript regular expression that the entire value must match — it is implicitly anchored, so the regex must match the whole string. It applies to text, search, url, tel, email and password inputs and sets the patternMismatch flag when it fails.

What is the Constraint Validation API?

It is the DOM interface for native validation. Each control exposes a validity object (ValidityState), checkValidity() and reportValidity() to trigger checks, and setCustomValidity(message) to inject your own error. An empty custom message marks the field valid again.

What is the difference between checkValidity and reportValidity?

checkValidity() returns a boolean and fires an invalid event but shows no UI. reportValidity() does the same and additionally displays the browser's validation bubble on the first invalid control, focusing it.

Why does required behave differently per input type?

For text-like inputs required means non-empty. For checkboxes it means the box must be checked. For radio groups it means one option in the name group must be selected. For file inputs it means at least one file must be chosen.

Is the pattern tester run locally?

Yes. The regex is compiled and tested in your browser with the same anchoring HTML uses. Nothing is sent to a server.

HTML Form Validation Attributes

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Native validation without JavaScript

HTML5 form validation lets the browser enforce rules declaratively through attributes, exposing the result via the Constraint Validation API. This reference covers every validation attribute, the ValidityState flag it sets, and the API methods — plus a live tester for the pattern attribute.

How it works

Validation attributes constrain a control; on submit (or via a script call) the browser checks each constraint and sets the matching ValidityState flag:

<input type="text" required minlength="3" maxlength="20"
       pattern="[a-z0-9_]+" title="lowercase, digits, underscore">

const input = form.elements.username;
if (!input.checkValidity()) {
  console.log(input.validity); // { patternMismatch: true, ... }
}
input.setCustomValidity(taken ? "Username is taken" : "");
form.reportValidity(); // shows the bubble on the first invalid field

The pattern regex is implicitly anchored to the whole value (^(?:...)$), so it must match the entire string, not a substring.

Tips and notes

pattern only validates non-empty values — combine with required to forbid blanks.
Always set a title alongside pattern; browsers show it in the error bubble.
min/max/step apply to numeric and date types; step mismatches set stepMismatch (e.g. step="5" rejects 7).
novalidate on the form or formnovalidate on a submit button skips all checks.
Style states with the :valid, :invalid, :required and :user-invalid CSS pseudo-classes.