Jens Oliver Meiert

HTML Concepts: Constraint Validation

Post from July 27, 2021, filed under .

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 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 will 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.

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, 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 questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: 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.

Stay up-to-date? Follow me by feed or on Twitter.

Looking for a way to comment? Comments have been disabled, unfortunately.

Found a mistake? Email me, jens@meiert.com.

You are here: Home → Archive → 2021 → HTML Concepts: Constraint Validation

Last update: July 27, 2021

Professional frontend developers produce valid HTML and CSS.