The Constraint Validation API is a built-in browser JavaScript API that allows developers to programmatically check the validity of HTML form elements. It provides methods like checkValidity(), reportValidity(), and setCustomValidity(), along with the ValidityState object that exposes detailed validation status through properties like valueMissing, typeMismatch, patternMismatch, and more. It works natively with HTML5 form validation attributes such as required, pattern, min, max, minlength, maxlength, and type constraints.

checkValidity() silently returns true or false without any visual feedback to the user. It also fires an invalid event on the element if validation fails.

reportValidity() also returns true/false but additionally triggers the browser's native validation UI — showing a tooltip/bubble with the error message near the invalid field. This is what browsers use when a form is submitted. Use checkValidity() for programmatic checks and reportValidity() when you want to show validation errors to users.

setCustomValidity(message) allows you to set a custom validation error on a form element. When called with a non-empty string, it sets the element's customError validity flag to true and makes the validationMessage return your custom message. The field becomes invalid regardless of other constraints.

To clear the custom error, call setCustomValidity('') with an empty string. This resets the customError flag. Note that setCustomValidity() is not cumulative — each call overwrites the previous custom message.

The ValidityState object has 11 boolean properties:

• valid — true if the element meets all constraints
• valueMissing — true if a required field is empty
• typeMismatch — true if the value doesn't match the expected type (email, url, etc.)
• patternMismatch — true if the value doesn't match the pattern regex
• tooLong — true if the value exceeds maxlength
• tooShort — true if the value is shorter than minlength
• rangeUnderflow — true if the value is less than min
• rangeOverflow — true if the value exceeds max
• stepMismatch — true if the value doesn't match the step increment
• badInput — true if the browser cannot parse the input (rare in modern browsers)
• customError — true if setCustomValidity() has set a non-empty message

You can use the :valid and :invalid CSS pseudo-classes to style fields based on their validation state. For example:
input:invalid { border-color: red; }
input:valid { border-color: green; }

However, note that these pseudo-classes apply immediately (even before user interaction), which can lead to a poor UX. A common pattern is to only apply validation styling after the field has been interacted with, using :user-invalid (modern browsers) or by toggling classes via JavaScript after blur or input events.

Browsers automatically prevent form submission if any field fails HTML5 validation (when the form is submitted normally without novalidate). For JavaScript-driven submissions, you can check validity manually:

if (!form.checkValidity()) {
  form.reportValidity(); // show errors to user
  return; // prevent submission
}

Adding the novalidate attribute to the <form> tag disables the browser's automatic validation, giving you full control via JavaScript.

The Constraint Validation API is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has been available since IE10+. The ValidityState interface, checkValidity(), reportValidity(), and setCustomValidity() are all widely supported. However, reportValidity() was added slightly later and may not be available in IE11 (use a polyfill or fallback to checkValidity() if needed).

HTML5 validation constraints like minlength, pattern, min/max, and type are only evaluated when the field has a value. An empty field that is not marked as required will pass validation because the specification treats "no value" as valid — the user is not forced to fill it in. If you want to enforce both a value and a constraint, always pair your validation attribute with required.