When working with forms, HTML5 provides built-in validation that you can access directly from JavaScript. Two important tools for this are the checkValidity() method and the validity property, both available on form elements such as input, select, and textarea. These allow you to programmatically determine if a field meets all HTML5 validation constraints, such as required, type, minlength, maxlength, and pattern.

The checkValidity() method returns true if the element's value satisfies all the constraints set in the HTML, and false otherwise. The validity property is an object containing boolean properties that describe which specific rule failed, such as valueMissing, typeMismatch, or patternMismatch. By combining these, you can trigger custom error messages or prevent a form from submitting if the data is invalid. For example, you might call input.checkValidity() inside a submit event handler, and then use the details from input.validity to display a specific message to the user, rather than relying only on the browser's default validation bubbles.