Modifying Element Styles and Classes

// HTML:
// <form id="registration-form">
//   <div class="form-group">
//     <label for="username">Username:</label>
//     <input type="text" id="username" required minlength="3" maxlength="20">
//     <div class="error-message"></div>
//   </div>
//   <div class="form-group">
//     <label for="email">Email:</label>
//     <input type="email" id="email" required>
//     <div class="error-message"></div>
//   </div>
//   <div class="form-group">
//     <label for="password">Password:</label>
//     <input type="password" id="password" required minlength="8">
//     <div class="error-message"></div>
//   </div>
//   <button type="submit">Register</button>
// </form>

// CSS:
// .form-group {
//   margin-bottom: 15px;
//   position: relative;
// }
//
// input {
//   border: 2px solid #ddd;
//   transition: border-color 0.3s;
// }
//
// input.valid {
//   border-color: #2ecc71;
// }
//
// input.invalid {
//   border-color: #e74c3c;
// }
//
// .error-message {
//   color: #e74c3c;
//   font-size: 0.85em;
//   margin-top: 5px;
//   height: 0;
//   overflow: hidden;
//   transition: height 0.3s;
// }
//
// .error-message.visible {
//   height: auto;
//   min-height: 20px;
// }

// JavaScript
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registration-form');
    const inputs = form.querySelectorAll('input');
    
    // Validation rules object
    const validationRules = {
        username: {
            pattern: /^[a-zA-Z0-9_]{3,20}$/,
            message: 'Username must be 3-20 characters and contain only letters, numbers, and underscores.'
        },
        email: {
            pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Please enter a valid email address.'
        },
        password: {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
            message: 'Password must be at least 8 characters long and include at least one letter and one number.'
        }
    };
    
    // Add validation to each input
    inputs.forEach(input => {
        // Validate on blur
        input.addEventListener('blur', function() {
            validateInput(this);
        });
        
        // Real-time validation for better UX (with debounce)
        let debounceTimeout;
        input.addEventListener('input', function() {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                validateInput(this);
            }, 500);
        });
    });
    
    // Form submission
    form.addEventListener('submit', function(event) {
        let isValid = true;
        
        // Validate all inputs
        inputs.forEach(input => {
            if (!validateInput(input)) {
                isValid = false;
            }
        });
        
        // Prevent submission if any input is invalid
        if (!isValid) {
            event.preventDefault();
        }
    });
    
    // Validation function
    function validateInput(input) {
        // Remove existing states
        input.classList.remove('valid', 'invalid');
        
        const errorElement = input.nextElementSibling;
        errorElement.textContent = '';
        errorElement.classList.remove('visible');
        
        // Required field validation
        if (input.required && !input.value.trim()) {
            input.classList.add('invalid');
            errorElement.textContent = 'This field is required.';
            errorElement.classList.add('visible');
            return false;
        }
        
        // Skip other validation if field is empty and not required
        if (!input.value.trim()) {
            return true;
        }
        
        // Length validation
        if (input.minLength && input.value.length < input.minLength) {
            input.classList.add('invalid');
            errorElement.textContent = `Must be at least ${input.minLength} characters.`;
            errorElement.classList.add('visible');
            return false;
        }
        
        // Pattern validation
        const rule = validationRules[input.id];
        if (rule && !rule.pattern.test(input.value)) {
            input.classList.add('invalid');
            errorElement.textContent = rule.message;
            errorElement.classList.add('visible');
            return false;
        }
        
        // Type-specific validation
        if (input.type === 'email' && !validationRules.email.pattern.test(input.value)) {
            input.classList.add('invalid');
            errorElement.textContent = 'Please enter a valid email address.';
            errorElement.classList.add('visible');
            return false;
        }
        
        // If we've passed all validations
        input.classList.add('valid');
        return true;
    }
});