Handling Forms & User Input

How do checkValidity() and reportValidity() differ in validation workflow?

function validateForm(form) {
  const inputs = Array.from(form.elements);
  return inputs.every(input => {
    if (!input.checkValidity()) {
      input.reportValidity();
      return false;
    }
    return true;
  });
}

They are identical
checkValidity only checks, reportValidity shows UI feedback
checkValidity() and reportValidity() serve different purposes: 1) checkValidity() only tests validity and returns boolean without UI feedback, 2) reportValidity() checks validity AND displays the validation message to the user, 3) checkValidity() is useful for programmatic validation without visual feedback, 4) reportValidity() should be used when you want to show validation UI to users, 5) Both methods trigger the 'invalid' event if validation fails.
reportValidity is more thorough
checkValidity is deprecated

Next Question (8/20)