// Lesson 11 — Forms with JavaScript // // HTML: // const form = document.getElementById('contact-form') // Helper: show or clear an error on a form group function setError(input, message) { const group = input.closest('.form-group') const errMsg = group.querySelector('.error-msg') if (message) { group.classList.add('error') group.classList.remove('success') errMsg.textContent = message } else { group.classList.remove('error') group.classList.add('success') errMsg.textContent = '' } } // Validation functions function validateName(value) { if (!value.trim()) return 'Name is required' if (value.trim().length < 2) return 'Name must be at least 2 characters' return null // null = valid } function validateEmail(value) { if (!value) return 'Email is required' if (!value.includes('@')) return 'Enter a valid email address' return null } // TODO 1: Validate on blur — when user leaves each field const nameInput = form.querySelector('[name="name"]') const emailInput = form.querySelector('[name="email"]') nameInput.addEventListener('blur', (e) => { const error = validateName(e.target.value) setError(nameInput, error) // null = clear error }) emailInput.addEventListener('???', (e) => { // validate email, call setError }) // TODO 2: Live positive feedback on input (once valid) nameInput.addEventListener('input', (e) => { if (!validateName(e.target.value)) { setError(nameInput, null) // clear error immediately when valid } }) // TODO 3: Handle submit — prevent reload, read FormData, validate all form.addEventListener('submit', (e) => { // e.???() — stop page reload const data = new FormData(???) // pass the form element const nameVal = data.get('???') const emailVal = data.get('???') const nameErr = validateName(nameVal) const emailErr = validateEmail(emailVal) setError(nameInput, nameErr) setError(emailInput, emailErr) if (!nameErr && !emailErr) { console.log('Valid! Sending:', Object.fromEntries(data)) // form.reset() // clear form after success } }) // TODO 4: Reset button — clear all validation state form.addEventListener('reset', () => { form.querySelectorAll('.form-group').forEach(group => { group.classList.remove('error', 'success') group.querySelector('.error-msg').textContent = '' }) })