Detailed explanation
Native HTML form validation lets you declare input constraints directly in markup instead of writing JavaScript for every check. The browser evaluates eligible controls against these constraints and, during normal submission, blocks the form if any control is invalid. It generally displays a browser-provided message and focuses an invalid control. This gives users immediate feedback, but it is not a security boundary: requests can bypass the page, so the server must validate submitted data independently.
Choose attributes according to the field’s meaning. required rejects a missing value; type="email" and type="url" check supported formats rather than whether an address or resource exists. minlength and maxlength constrain text length, while min and max define bounds for compatible types such as number and date. step controls permitted numeric or temporal increments. pattern supplies a regular expression for supported text-like inputs and matches the entire value, not just a substring. Most of these constraints permit an empty optional field, so add required when a value is mandatory. For text-length constraints, remember that browsers principally enforce them on user-entered values.
In the example, pattern="[A-Za-z]{3,}" with required accepts only three or more ASCII letters; spaces, digits, and accented letters fail. The required email input must contain a value matching the browser’s email syntax rules. The title attribute can describe the pattern, but visible instructions and associated labels are more dependable for accessibility. Under the hood, controls expose a validity object with flags such as valueMissing, typeMismatch, patternMismatch, and rangeUnderflow. CSS :valid and :invalid reflect validity; :user-invalid can help avoid showing errors before users interact, where supported.
JavaScript is optional, but the Constraint Validation API provides useful hooks. checkValidity() returns a Boolean and fires invalid events for failing controls; reportValidity() also asks the browser to present validation feedback. setCustomValidity(message) sets a custom error, which must be cleared with an empty string. Interviewers often check whether you know the bypasses: novalidate on the form and formnovalidate on a submit button disable interactive submission validation, while form.submit() skips it; requestSubmit() follows normal submission validation.
Key points to remember
- Use semantic input types and attributes to declare constraints without JavaScript.
- Combine required with format or length constraints when empty values must be rejected.
- pattern matches the entire value; min, max, and step apply to compatible input types.
- Use :valid and :invalid for styling, with accessible text feedback rather than colour alone.
- Native validation improves usability; server-side validation remains mandatory.
Common mistakes candidates make
- Assuming type="email" verifies that an email address exists or can receive mail.
- Using pattern or minlength alone and expecting an empty optional field to fail.
- Setting a custom validity message without clearing it after the value becomes acceptable.
Likely follow-up questions
What is the difference between checkValidity() and reportValidity()?
Both evaluate constraints, return whether the control or form is valid, and fire invalid events for failing controls. reportValidity() additionally requests browser-provided feedback for failures whose invalid events are not cancelled.
How would you validate that two password fields match?
HTML attributes cannot express equality between two fields, so compare their values with JavaScript. Call setCustomValidity() on the confirmation field with an error message when they differ and an empty string when they match, updating the check whenever either value changes.
Does programmatically submitting a form trigger native validation?
form.submit() bypasses constraint validation and does not fire the submit event. Use form.requestSubmit() to follow the normal submission process, including validation unless it is disabled by the applicable attributes.
Interview tip: Explain the attributes using the supplied example, then distinguish browser feedback from server-side protection and mention one Constraint Validation API method.