DOM Traversal

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

// JavaScript with DOM traversal
document.getElementById('registration-form').addEventListener('input', function(event) {
    // Only validate input elements
    if (event.target.tagName === 'INPUT') {
        validateInput(event.target);
    }
});

document.getElementById('registration-form').addEventListener('submit', function(event) {
    // Validate all inputs before submission
    const inputs = this.querySelectorAll('input');
    let isValid = true;
    
    inputs.forEach(input => {
        if (!validateInput(input)) {
            isValid = false;
        }
    });
    
    if (!isValid) {
        event.preventDefault(); // Prevent form submission
    }
});

function validateInput(input) {
    // Find the error message container (next sibling of the input)
    const errorElement = input.nextElementSibling;
    
    // Clear any existing error
    errorElement.textContent = '';
    errorElement.classList.remove('active');
    
    // Check validity
    if (!input.validity.valid) {
        let message = '';
        
        if (input.validity.valueMissing) {
            message = 'This field is required';
        } else if (input.validity.typeMismatch) {
            message = 'Please enter a valid format';
        } else if (input.validity.tooShort) {
            message = `Please use at least ${input.minLength} characters`;
        }
        
        // Custom validation for password strength
        if (input.id === 'password' && input.value.length > 0 && input.value.length < 8) {
            message = 'Password must be at least 8 characters long';
        }
        
        // Display error message
        errorElement.textContent = message;
        errorElement.classList.add('active');
        
        return false;
    }
    
    return true;
}