Implement Form Validation with JavaScript

Here's a complete contact form validation solution: **HTML:** ```html <form id="contactForm" class="contact-form"> <div class="form-group"> <label for="name">Name *</label> <input type="text" id="name" name="name" required> <span class="error-message" id="name-error"></span> </div> <div class="form-group"> <label for="email">Email *</label> <input type="email" id="email" name="email" required> <span class="error-message" id="email-error"></span> </div> <button type="submit">Send Message</button> <div class="success-message" id="success-message"></div> </form> ``` **JavaScript:** ```javascript const form = document.getElementById('contactForm'); const nameField = document.getElementById('name'); const emailField = document.getElementById('email'); // Real-time validation nameField.addEventListener('input', () => validateField(nameField, validateName)); emailField.addEventListener('input', () => validateField(emailField, validateEmail)); // Validation functions function validateName(value) { if (value.trim().length < 2) return 'Name must be at least 2 characters'; return null; } function validateEmail(value) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(value)) return 'Please enter a valid email address'; return null; } // Form submission handler form.addEventListener('submit', (e) => { e.preventDefault(); if (validateAllFields()) { showSuccess('Message sent successfully!'); } }); ``` This solution provides immediate feedback, prevents invalid submissions, and follows accessibility best practices.