HTML Constraints.

Theory. The browser can validate on its own — with attributes: required, type="email" / "number", min and max for numbers, minlength/maxlength for length, and pattern (a regular expression) for text. Each of them makes the field invalid without any logic from you.

Read the state from el.validity.valid (or el.checkValidity()). You can also set the attributes from JS: el.required = true; el.type = "email"; el.min = 18; el.pattern = "[A-Z]{3}[0-9]{2}".

Small examples:

const age = document.querySelector("#age"); age.type = "number"; age.min = 18; age.max = 99;

A pattern must match the whole value: [A-Z]{3}[0-9]{2} accepts "ABC12" but not "abc12" and not "ABC123".

Important: client-side validation is for the user's convenience. It does NOT replace server checks — anyone can bypass the browser.

Common mistake: type="number" for values that are not numbers (phone, postal code); forgotten required — an empty field is valid!