Form Validation
📌 Covered in this chapter:
Browser Native Validation · novalidate Attribute · Validity State Object · checkValidity() & reportValidity() · CSS :valid & :invalid · Custom JS Messages
Welcome to Phase 7 (Chapter 19): Form Validation! Validate input data before sending it to your backend using native HTML5 validation and JavaScript's
ValidityState API.
1ValidityState API Syntax
HTML + JS — Custom Form Validation
▶ Run in HTML Editor
<form novalidate id="myForm">
<input id="email" type="email" required placeholder="Enter email">
<button type="button" onclick="validateInput()">Validate</button>
</form>
<script>
function validateInput() {
const input = document.getElementById('email');
if (!input.checkValidity()) {
alert('Validation Error: Please enter a valid email address!');
} else {
alert('Success: Input is valid!');
}
}
</script>