Handling Forms & User Input

When does the 'invalid' event fire?

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, select, textarea');

inputs.forEach(input => {
  input.addEventListener('invalid', e => {
    e.preventDefault();
    input.classList.add('error');
  });
});

When the form is submitted
When an input loses focus
When validation fails
The 'invalid' event fires when a form control fails constraint validation, which can happen: 1) During form submission, 2) When calling checkValidity() or reportValidity(), 3) For any validation failure including required fields, pattern matching, or custom validation, 4) Before the form's submit event. Preventing default on the invalid event stops the browser's default validation UI, allowing custom styling and error handling.
When the input value changes

Next Question (4/20)