HTML Constraint Attributes: A Validation Vocabulary In Markup

The required boolean attribute is the simplest and most frequently used validation rule: any field carrying it must have a non-empty value before the enclosing form can successfully submit. On failure, the field's validity.valueMissing flag becomes true, and the browser's native error UI (covered in the previous lesson) displays automatically on submission attempt.

required works across virtually every input type — text, email, checkboxes (requiring it be checked), radio button groups (requiring one option selected), and select elements — making it broadly applicable with zero variation in syntax.

min and max constrain the acceptable value range for numeric, date, and similar input types — <input type="number" min="1" max="10"> only validates values from 1 through 10. minlength and maxlength perform the analogous role for text-based inputs, constraining acceptable character count rather than numeric value.

All four attributes generate their own dedicated validity flags on failure (rangeUnderflow, rangeOverflow, tooShort, tooLong respectively), letting a developer distinguish exactly which specific constraint failed if custom error messaging is needed, using the validity object from the previous lesson.

step defines the valid increment granularity a numeric or date value must fall on, measured from the field's min value (or 0 if unset). step="0.01" on a currency field means only cent-precision values are valid — 19.99 validates, 19.999 does not, correctly modeling how currency should be entered without any custom parsing or rounding logic.

A value violating step triggers the stepMismatch validity flag. step combines naturally with min/max to fully constrain both a value's range and its acceptable granularity within that range declaratively.

Validation Rules Declared, Not Coded. Every field the Constraint Validation API inspects gets its rules from a small set of declarative HTML attributes. Learning this vocabulary means most common validation needs — required fields, numeric ranges, length limits — are solved entirely in markup, with zero JavaScript.

required Blocks Submission Of Empty Fields. The required boolean attribute is the simplest and most common constraint: a field with it present must have a non-empty value before the form can submit, triggering the valueMissing validity flag and native error UI otherwise.

The required Attribute. What validity flag does a required field trigger when submitted empty?

• →valueMissing
• →typeMismatch
• →rangeUnderflow

min/max And minlength/maxlength For Ranges. min and max constrain numeric or date input values to an acceptable range, while minlength and maxlength constrain text input character count — four related attributes covering the most common 'value within bounds' validation need entirely declaratively.

Range Constraint Attributes. Which pair of attributes constrains the acceptable character count of a text input, as opposed to a numeric value range?

• →min and max
• →minlength and maxlength
• →step, used alone

step Controls Acceptable Increments. The step attribute constrains a numeric or date input to specific increments from its min value — step="0.01" on a price field ensures only cent-precision values validate, rejecting fractional-cent entries without any custom parsing logic.

The step Attribute. An <input type="number" min="0" step="0.01"> is meant to represent a price. What does step="0.01" specifically enforce?

• →A maximum value cap of 0.01
• →That valid values only fall on cent-precision increments from the min value
• →Purely a display formatting hint with no validation effect

Constraint Vocabulary Learned. You now know the core declarative HTML validation vocabulary — required, min/max, minlength/maxlength, and step — covering the large majority of common validation needs entirely in markup, before any JavaScript is written.

Enforce A Minimum Length. Combine required with minlength for a field that must be filled in and long enough.