Form Validation (Constraint Validation API)

<form id="signup" novalidate>
  <div class="field">
    <label for="name">Name</label>
    <input id="name" name="name" required minlength="2"
           autocomplete="name" aria-describedby="name-error">
    <p class="error" id="name-error"></p>
  </div>

  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required
           autocomplete="email" aria-describedby="email-error">
    <p class="error" id="email-error"></p>
  </div>

  <div class="field">
    <label for="postcode">Postcode</label>
    <input id="postcode" name="postcode" required inputmode="numeric"
           pattern="[0-9]{5}" data-pattern-message="Malaysian postcodes have 5 digits."
           aria-describedby="postcode-error">
    <p class="error" id="postcode-error"></p>
  </div>

  <button type="submit">Sign up</button>
  <p role="status" id="form-status"></p>
</form>

const form = document.getElementById("signup");
const statusEl = document.getElementById("form-status");

function messageFor(input) {
  const v = input.validity;
  if (v.valueMissing) return "Please fill in this field.";
  if (v.typeMismatch) return "Please enter a valid " + input.type + " address.";
  if (v.tooShort) return "Use at least " + input.minLength + " characters (you typed " + input.value.length + ").";
  if (v.patternMismatch) return input.dataset.patternMessage || "Please match the requested format.";
  return input.validationMessage; // anything else: the browser's own message
}

function showError(input) {
  const errorEl = document.getElementById(input.id + "-error");
  const valid = input.validity.valid;
  input.setAttribute("aria-invalid", String(!valid));
  if (errorEl) errorEl.textContent = valid ? "" : messageFor(input);
  return valid;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const fields = Array.from(form.querySelectorAll("input, select, textarea"));
  const firstInvalid = fields.filter((field) => !showError(field))[0];

  if (firstInvalid) {
    firstInvalid.focus();
    statusEl.textContent = "";
    return;
  }

  const data = Object.fromEntries(new FormData(form));
  statusEl.textContent = "Thanks, " + data.name + "! (Nothing was sent — this is a demo.)";
  console.log("Valid data:", data);
});

// Re-check a field as the user fixes it — but only after it was marked invalid
form.addEventListener("input", (event) => {
  if (event.target.getAttribute("aria-invalid") === "true") showError(event.target);
});