validation.js

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registrationForm');
    
    const studentName = document.getElementById('studentName');
    const rollNumber = document.getElementById('rollNumber');
    const email = document.getElementById('email');
    const department = document.getElementById('department');
    const eventName = document.getElementById('eventName');
    
    const studentNameError = document.getElementById('studentNameError');
    const rollNumberError = document.getElementById('rollNumberError');
    const emailError = document.getElementById('emailError');
    const departmentError = document.getElementById('departmentError');
    const eventNameError = document.getElementById('eventNameError');
    
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    
    function clearError(field, errorElement) {
        field.classList.remove('invalid');
        errorElement.textContent = '';
    }
    
    function showError(field, errorElement, message) {
        field.classList.add('invalid');
        errorElement.textContent = message;
    }
    
    function validateStudentName() {
        const value = studentName.value.trim();
        
        if (value === '') {
            showError(studentName, studentNameError, 'Student name is required');
            return false;
        } else if (value.length < 3) {
            showError(studentName, studentNameError, 'Name must be at least 3 characters long');
            return false;
        } else if (!/^[a-zA-Z\s]+$/.test(value)) {
            showError(studentName, studentNameError, 'Name should contain only letters and spaces');
            return false;
        } else {
            clearError(studentName, studentNameError);
            return true;
        }
    }
    
    function validateRollNumber() {
        const value = rollNumber.value.trim();
        
        if (value === '') {
            showError(rollNumber, rollNumberError, 'Roll number is required');
            return false;
        } else if (value.length < 3) {
            showError(rollNumber, rollNumberError, 'Roll number must be at least 3 characters long');
            return false;
        } else {
            clearError(rollNumber, rollNumberError);
            return true;
        }
    }
    
    function validateEmail() {
        const value = email.value.trim();
        
        if (value === '') {
            showError(email, emailError, 'Email address is required');
            return false;
        } else if (!emailPattern.test(value)) {
            showError(email, emailError, 'Please enter a valid email address (e.g., user@example.com)');
            return false;
        } else {
            clearError(email, emailError);
            return true;
        }
    }
    
    function validateDepartment() {
        const value = department.value;
        
        if (value === '') {
            showError(department, departmentError, 'Please select your department');
            return false;
        } else {
            clearError(department, departmentError);
            return true;
        }
    }
    
    function validateEventName() {
        const value = eventName.value;
        
        if (value === '') {
            showError(eventName, eventNameError, 'Please select an event to register');
            return false;
        } else {
            clearError(eventName, eventNameError);
            return true;
        }
    }
    
    studentName.addEventListener('blur', validateStudentName);
    rollNumber.addEventListener('blur', validateRollNumber);
    email.addEventListener('blur', validateEmail);
    department.addEventListener('change', validateDepartment);
    eventName.addEventListener('change', validateEventName);
    
    studentName.addEventListener('input', function() {
        if (studentName.classList.contains('invalid')) {
            validateStudentName();
        }
    });
    
    rollNumber.addEventListener('input', function() {
        if (rollNumber.classList.contains('invalid')) {
            validateRollNumber();
        }
    });
    
    email.addEventListener('input', function() {
        if (email.classList.contains('invalid')) {
            validateEmail();
        }
    });
    
    form.addEventListener('submit', function(event) {
        const isNameValid = validateStudentName();
        const isRollValid = validateRollNumber();
        const isEmailValid = validateEmail();
        const isDeptValid = validateDepartment();
        const isEventValid = validateEventName();
        
        const isFormValid = isNameValid && isRollValid && isEmailValid && isDeptValid && isEventValid;
        
        if (!isFormValid) {
            event.preventDefault();
            
            const firstError = document.querySelector('.invalid');
            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                firstError.focus();
            }
            
            alert('Please fill in all required fields correctly before submitting.');
        }
    });
});