Form Handling & Validation
Form handling is one of the most practical JavaScript skills. Learn to collect form data, validate inputs, show error messages, and prevent submission until data is valid - all with vanilla JavaScript.
Form Handling Techniques
- FormData API - new FormData(form) collects all form inputs automatically
- Object.fromEntries(formData) - Convert FormData to plain object
- Validation - Check inputs before submission: required, email format, password strength
- Real-time validation - Validate on 'input' event for instant feedback
- Error display - Add/remove error classes and messages next to each field
- Prevent submission - Use event.preventDefault() to stop form from reloading the page
Form Validation Code
// Form validation logic
function validateEmail(email) {
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return pattern.test(email);
}
function validatePassword(password) {
return password.length >= 8;
}
// Form handler
function handleFormSubmit(event) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
const data = Object.fromEntries(formData);
const errors = [];
// Validate name
if (!data.name || data.name.trim().length < 2) {
errors.push("Name must be at least 2 characters");
}
// Validate email
if (!validateEmail(data.email)) {
errors.push("Please enter a valid email address");
}
// Validate password
if (!validatePassword(data.password)) {
errors.push("Password must be at least 8 characters");
}
if (errors.length > 0) {
console.log("❌ Validation errors:");
errors.forEach(err => console.log(` • ${err}`));
return;
}
console.log("✅ Form is valid! Data:", data);
}
// Real-time validation on input
function validateField(input) {
const value = input.value.trim();
const name = input.name;
if (name === "email" && !validateEmail(value)) {
return "Invalid email format";
}
if (name === "password" && value.length < 8) {
return `Password: ${value.length}/8 characters`;
}
return ""; // valid
}
console.log("Form validation demonstrated");
console.log(validateEmail("test@email.com")); // true
console.log(validateEmail("invalid")); // false
console.log(validatePassword("12345678")); // true
console.log(validatePassword("123")); // falseTip
Tip
Validate on input (real-time feedback) AND on submit (final check). Show error messages inline near the field, not in alerts. Use CSS classes like .error and .valid to style fields based on validation state.
HTML5 validation = zero JavaScript - the browser handles it
Common Mistake
Warning
Relying only on client-side validation. Users can disable JavaScript or modify the DOM. Always validate on the server too. Client-side validation is for UX (instant feedback); server-side validation is for security.
Practice Task
Note
Build a validation system: (1) Email field with regex validation showing real-time feedback. (2) Password field with strength indicator (length, uppercase, number). (3) Confirm password field that checks match. (4) Disable submit until all fields are valid.
Quick Quiz
Key Takeaways
- Form handling is one of the most practical JavaScript skills.
- FormData API - new FormData(form) collects all form inputs automatically
- Object.fromEntries(formData) - Convert FormData to plain object
- Validation - Check inputs before submission: required, email format, password strength