Form Events — Complete Guide

const loginForm = document.getElementById('login-form');

loginForm.addEventListener('submit', function(event) {
    // Prevent the browser from reloading the page
    event.preventDefault();
    console.log('Form submit intercepted');

    // Get form data
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    console.log('Form data:', data);

    // Client-side validation
    const email = data.email;
    const password = data.password;

    if (!email || !password) {
        showError('All fields are required');
        return;
    }

    if (!email.includes('@')) {
        showError('Please enter a valid email');
        return;
    }

    if (password.length < 6) {
        showError('Password must be at least 6 characters');
        return;
    }

    // If validation passes, send data
    console.log('Submitting login...');
    // fetch('/api/login', { method: 'POST', body: JSON.stringify(data) });
});

function showError(message) {
    const errorDiv = document.querySelector('.form-error');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
}

const searchInput = document.querySelector('#search');
const suggestions = document.querySelector('.suggestions');
const charCount = document.querySelector('.char-count');

searchInput.addEventListener('input', function(event) {
    const value = this.value;
    console.log('Input value:', value);

    // Update character count
    charCount.textContent = `${value.length} characters`;

    // Simple search suggestions
    if (value.length >= 2) {
        const filtered = countries.filter(c =>
            c.toLowerCase().includes(value.toLowerCase())
        );
        renderSuggestions(filtered.slice(0, 5));
    } else {
        suggestions.innerHTML = '';
    }
});

function renderSuggestions(items) {
    suggestions.innerHTML = items
        .map(item => `<div class="suggestion">${item}</div>`)
        .join('');
}

// Note: input fires for every change including paste, cut, and IME composition
// For debounced API calls (avoid excessive requests), wrap in a setTimeout

const countrySelect = document.querySelector('#country');
const stateSelect = document.querySelector('#state');
const newsletterCheckbox = document.querySelector('#newsletter');
const colorRadios = document.querySelectorAll('input[name="color"]');

// Select change
countrySelect.addEventListener('change', function(event) {
    console.log('Country changed to:', this.value);
    updateStates(this.value);
});

function updateStates(country) {
    stateSelect.innerHTML = '<option value="">Select state</option>';
    const states = stateData[country] || [];
    states.forEach(s => {
        const option = document.createElement('option');
        option.value = s.code;
        option.textContent = s.name;
        stateSelect.appendChild(option);
    });
    stateSelect.disabled = states.length === 0;
}

// Checkbox change
newsletterCheckbox.addEventListener('change', function(event) {
    console.log('Newsletter:', this.checked ? 'Subscribed' : 'Unsubscribed');
    const emailGroup = document.querySelector('.email-preferences');
    emailGroup.style.display = this.checked ? 'block' : 'none';
});

// Radio change (on the group container)
document.querySelector('.color-group').addEventListener('change', function(event) {
    if (event.target.matches('input[type="radio"]')) {
        console.log('Color selected:', event.target.value);
        document.body.style.backgroundColor = event.target.value;
    }
});

const inputs = document.querySelectorAll('.form-input');

inputs.forEach(input => {
    // Focus: show help text
    input.addEventListener('focus', function(event) {
        console.log('Focused:', this.name);
        const helpId = this.dataset.help;
        if (helpId) {
            document.getElementById(helpId).classList.add('visible');
        }
        this.classList.add('focused');
    });

    // Blur: validate and hide help
    input.addEventListener('blur', function(event) {
        const helpId = this.dataset.help;
        if (helpId) {
            document.getElementById(helpId).classList.remove('visible');
        }
        this.classList.remove('focused');

        // Validate on blur
        if (this.required && !this.value.trim()) {
            this.classList.add('error');
            showFieldError(this, 'This field is required');
        } else {
            this.classList.remove('error');
            clearFieldError(this);
        }
    });
});

// Focusin/focusout bubble (unlike focus/blur)
const form = document.querySelector('.signup-form');
form.addEventListener('focusin', function(event) {
    console.log('Focus entered form field:', event.target.name);
});
form.addEventListener('focusout', function(event) {
    console.log('Focus left form field:', event.target.name);
});

const form = document.querySelector('#registration-form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    // Check browser validation
    if (!this.checkValidity()) {
        // Show validation messages
        const invalidFields = this.querySelectorAll(':invalid');
        invalidFields.forEach(field => {
            field.classList.add('error');
            const errorId = field.dataset.error;
            if (errorId) {
                document.getElementById(errorId).textContent = field.validationMessage;
            }
        });
        return;
    }

    console.log('Form is valid, submitting...');
    // Submit the form
});

// Real-time validation hints
const emailField = document.querySelector('#email');
emailField.addEventListener('input', function() {
    if (this.validity.valid) {
        this.classList.remove('error');
        this.classList.add('valid');
        document.querySelector('#email-error').textContent = '';
    } else if (this.validity.typeMismatch) {
        this.classList.add('error');
        document.querySelector('#email-error').textContent = 'Please enter a valid email address';
    }
});

// Custom validity
const passwordField = document.querySelector('#password');
passwordField.addEventListener('input', function() {
    if (this.value.length < 6) {
        this.setCustomValidity('Password must be at least 6 characters');
    } else {
        this.setCustomValidity('');
    }
});