Interview question

How do you handle form input events and validate form data in JavaScript? JavaScript में form input events कैसे handle करें और form data validate करें?

Answer

JavaScript listens to input-related events to track and validate user input in real time, before or instead of relying solely on native HTML validation.

Event	Fires when
input	Every time the value changes (each keystroke)
change	When the value is committed (on blur for text, immediately for select/checkbox)
submit	Form is submitted
focus / blur	Element gains / loses focus

const emailInput = document.querySelector('#email');
const form = document.querySelector('form');
const errorMsg = document.querySelector('#error');

// Real-time validation on every keystroke
emailInput.addEventListener('input', function(event) {
    const value = event.target.value;
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);

    if (!isValid && value.length > 0) {
        errorMsg.textContent = 'Please enter a valid email';
        emailInput.classList.add('invalid');
    } else {
        errorMsg.textContent = '';
        emailInput.classList.remove('invalid');
    }
});

// Full form validation on submit
form.addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(form);
    const errors = [];

    if (!formData.get('name')) errors.push('Name is required');
    if (!formData.get('email')) errors.push('Email is required');

    if (errors.length > 0) {
        console.log('Validation errors:', errors);
        return;
    }

    console.log('Form is valid, submitting:', Object.fromEntries(formData));
});

// Using built-in HTML5 validation API
emailInput.addEventListener('input', function() {
    if (emailInput.validity.typeMismatch) {
        emailInput.setCustomValidity('Please enter a valid email address');
    } else {
        emailInput.setCustomValidity('');
    }
});

// Debounced input handler for performance (e.g. live search)
function debounce(fn, delay) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
}
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', debounce((event) => {
    console.log('Searching for:', event.target.value);
}, 300));

JavaScript input-related events सुनता है ताकि real time में user input track और validate किया जा सके।

Event	कब fire होता है
input	हर बार value बदलने पर
change	Value commit होने पर
submit	Form submit होने पर

const emailInput = document.querySelector('#email');
const form = document.querySelector('form');

// Real-time validation
emailInput.addEventListener('input', function(event) {
    const value = event.target.value;
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);

    if (!isValid && value.length > 0) {
        emailInput.classList.add('invalid');
    } else {
        emailInput.classList.remove('invalid');
    }
});

// Submit पर validation
form.addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    const errors = [];

    if (!formData.get('name')) errors.push('Name जरूरी है');

    if (errors.length > 0) {
        console.log('Errors:', errors);
        return;
    }
    console.log('Form valid:', Object.fromEntries(formData));
});

// Debounced input (live search के लिए)
function debounce(fn, delay) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
}

Was this answer clear?

Subjects

Related questions