# Form Validation **Form validation** ensures that user-submitted data is correct and complete before it is processed or sent to a server. JavaScript allows you to validate on the client side in real time — giving instant feedback without a page reload. --- ## Why Validate with JavaScript? - Give instant feedback as the user types. - Prevent unnecessary server requests with invalid data. - Provide clear, specific error messages. - Improve user experience significantly. Client-side validation is **not a replacement** for server-side validation — always validate on the server too, since client-side JS can be bypassed. --- ## Basic Validation Pattern ```html ``` ```js const form = document.getElementById("signupForm"); const usernameInput = document.getElementById("username"); const emailInput = document.getElementById("email"); const passwordInput = document.getElementById("password"); const usernameError = document.getElementById("usernameError"); const emailError = document.getElementById("emailError"); const passwordError = document.getElementById("passwordError"); form.addEventListener("submit", function (event) { event.preventDefault(); let isValid = true; // Reset errors usernameError.textContent = ""; emailError.textContent = ""; passwordError.textContent = ""; // Validate username if (usernameInput.value.trim() === "") { usernameError.textContent = "Username is required."; isValid = false; } else if (usernameInput.value.trim().length < 3) { usernameError.textContent = "Username must be at least 3 characters."; isValid = false; } // Validate email if (emailInput.value.trim() === "") { emailError.textContent = "Email is required."; isValid = false; } else if (!isValidEmail(emailInput.value)) { emailError.textContent = "Please enter a valid email address."; isValid = false; } // Validate password if (passwordInput.value === "") { passwordError.textContent = "Password is required."; isValid = false; } else if (passwordInput.value.length < 8) { passwordError.textContent = "Password must be at least 8 characters."; isValid = false; } if (isValid) { console.log("Form submitted successfully."); form.reset(); } }); function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } ``` --- ## Common Validation Rules ### Required Field ```js if (input.value.trim() === "") { showError("This field is required."); } ``` ### Minimum Length ```js if (input.value.trim().length < 6) { showError("Must be at least 6 characters."); } ``` ### Maximum Length ```js if (input.value.length > 150) { showError("Cannot exceed 150 characters."); } ``` ### Email Format ```js function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } ``` ### Numbers Only ```js if (isNaN(input.value) || input.value.trim() === "") { showError("Please enter a valid number."); } ``` ### Password Strength ```js function isStrongPassword(password) { // At least 8 chars, one uppercase, one number, one special char return /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(password); } ``` ### Confirm Password Match ```js if (passwordInput.value !== confirmInput.value) { showError("Passwords do not match."); } ``` --- ## Real-time Validation with `input` Event Show errors as the user types instead of only on submit. ```js usernameInput.addEventListener("input", () => { const value = usernameInput.value.trim(); if (value === "") { usernameError.textContent = "Username is required."; } else if (value.length < 3) { usernameError.textContent = "At least 3 characters required."; } else { usernameError.textContent = ""; usernameInput.classList.add("valid"); usernameInput.classList.remove("invalid"); } }); ``` --- ## Helper Functions for Clean Code Repeating `element.textContent = ""` and style changes gets messy. Use helper functions: ```js function showError(input, errorEl, message) { errorEl.textContent = message; input.classList.add("invalid"); input.classList.remove("valid"); } function showSuccess(input, errorEl) { errorEl.textContent = ""; input.classList.add("valid"); input.classList.remove("invalid"); } function validateUsername(input, errorEl) { const value = input.value.trim(); if (value === "") { showError(input, errorEl, "Username is required."); return false; } if (value.length < 3) { showError(input, errorEl, "At least 3 characters required."); return false; } showSuccess(input, errorEl); return true; } ``` Now the submit handler is clean: ```js form.addEventListener("submit", (event) => { event.preventDefault(); const usernameValid = validateUsername(usernameInput, usernameError); const emailValid = validateEmail(emailInput, emailError); const passwordValid = validatePassword(passwordInput, passwordError); if (usernameValid && emailValid && passwordValid) { console.log("All valid — submit to server."); } }); ``` --- ## HTML5 Built-in Validation Attributes HTML5 provides validation attributes that work without any JavaScript. JavaScript can then build on top of them. ```html ``` **Disabling built-in validation** (so you can handle it yourself with JS): ```html ``` **Checking validity with the Constraint Validation API:** ```js console.log(input.validity.valid); // true or false console.log(input.validity.valueMissing); // true if required and empty console.log(input.validity.tooShort); // true if shorter than minlength console.log(input.validity.typeMismatch); // true if type="email" but not valid email console.log(input.validationMessage); // browser's built-in error message ``` --- ## Summary ``` Form Validation | |-- Pattern | Always event.preventDefault() on submit | Reset error messages before validating | Set isValid flag — only submit if all pass | |-- Common rules | Required → value.trim() === "" | Min length → value.length < n | Max length → value.length > n | Email → regex test | Number → isNaN(value) | Password → regex with rules | Match → value1 !== value2 | |-- Real-time | Use input event for live feedback | Show success/error state with classList | |-- Clean code | Helper functions: showError, showSuccess, validateField | Each validator returns true or false | |-- HTML5 attrs | required, minlength, maxlength, pattern, type | Use novalidate to take full control with JS ```

Form Validation in DOM

Introduction

Form Validation