How does the HTML5 Constraint Validation API work?

The Constraint Validation API lets you check whether an input meets its HTML constraints via checkValidity() and inspect the result through the validity object and validationMessage.

Key method: checkValidity()

const input = document.querySelector("#email");

if (input.checkValidity()) {
    console.log("Valid!");
} else {
    console.log("Invalid:", input.validationMessage);
}

Validation properties on input elements: