HTML Concepts: Constraint Validation
Post from July 27, 2021 (↻ December 17, 2021), filed under Web Development (feed).
In this installment of “HTML Concepts,” let’s look at HTML forms and constraint validation.
What is constraint validation?
When a form element (like
input) has attributes that define requirements for the element’s value (like being
required, or setting a
minlength, or following a
pattern), then these requirements (constraints) are being validated by the user agent.
Constraints are being validated as long as the element is not barred from it. This can happen when, for example, the element in question has a
An element satisfies its constraints if it doesn’t suffer from any of the following validity states:
- the value is required but missing;
- the value suffers from a type mismatch (incorrect syntax);
- the value suffers from a pattern mismatch;
- the value is too long;
- the value is too short;
- the value suffers from an underflow (not the empty string and too low for
- the value suffers from an overflow (not the the empty string and too high for
- the value suffers from step mismatch;
- the value has incomplete input;
- the value suffers from a custom error.
You run into constraint validation again in CSS. The validity pseudo-classes (
:invalid), for example, match if constraints are (not) satisfied; and the range pseudo-classes (
:in-range) match if they (don’t) suffer from under- or overflow. Interestingly, the HTML specification may currently explain this better than Selectors Level 4.
That’s it, at least for this brief conceptual description. The HTML specification’s Constraints section provides more detail. Love the specs.
I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Maybe this is interesting to you, too:
- Next: One Favicon to Rule Them All
- Previous: CSS: “:has()” and the Lost Paradigm
- More under Web Development, or from 2021
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.