input.addEventListener("input", () => form.reportValidity());
input.addEventListener(
  "invalid", (event) => handleValidity(event.target));

function handleValidity(input) {
  const validityState = input.validity;
  input.setCustomValidity("");

  if (validityState.tooShort) {
    input.setCustomValidity(
      "Yo! Add at least 4 characters to the password!"
    );
  }
}