HTML Concepts: Constraint Validation

Published on Jul 27, 2021 (updated Dec 17, 2021), filed under development, html (feed). (Share this on Mastodon or Bluesky?)

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 datalist ancestor.

An element satisfies its constraints if it doesn’t suffer from any of the following validity states:

1. the value is required but missing;
2. the value suffers from a type mismatch (incorrect syntax);
3. the value suffers from a pattern mismatch;
4. the value is too long;
5. the value is too short;
6. the value suffers from an underflow (not the empty string and too low for min value);
7. the value suffers from an overflow (not the empty string and too high for max value);
8. the value suffers from step mismatch;
9. the value has incomplete input;
10. the value suffers from a custom error.

You run into constraint validation again in CSS. The validity pseudo-classes (:valid and :invalid), for example, match if constraints are (not) satisfied; and the range pseudo-classes (:out-of-range and :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.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)