Eingaben prüfen und Fehler anzeigen

<form id="formular">
  <input id="name" name="name" required value="">
  <input id="email" name="email" type="email" value="keine-adresse">
  <input id="alter" name="alter" type="number" min="18" max="120" value="12">
  <input id="plz" name="plz" pattern="[0-9]{5}" value="123">
  <button type="submit">Absenden</button>
</form>
<pre id="protokoll"></pre>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #fafaf9;
  cursor: pointer;
}

input,
select,
textarea {
  padding: 0.35rem 0.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
}

const protokoll = document.getElementById("protokoll");

for (const feld of document.querySelectorAll("input")) {
  // checkValidity fragt, ob das Feld nach den HTML-Regeln
  // in Ordnung ist. validationMessage ist der Text, den der
  // Browser dazu anzeigen würde, in der Sprache des Nutzers.
  const zeile = [
    feld.name,
    feld.checkValidity() ? "gültig" : "ungültig",
    feld.validationMessage || "keine Meldung",
  ].join(" | ");
  protokoll.textContent = `${protokoll.textContent}${zeile}\n`;
}

// validity sagt sogar, WORAN es lag.
const alter = document.getElementById("alter");
console.log("zu klein?", alter.validity.rangeUnderflow);
console.log("leer?", document.getElementById("name").validity.valueMissing);
console.log("Muster verfehlt?", document.getElementById("plz").validity.patternMismatch);

// Und für das ganze Formular auf einmal.
console.log("Formular gültig?", document.getElementById("formular").checkValidity());

<form id="formular" novalidate>
  <input id="email" name="email" value="keine-adresse">
  <input id="alter" name="alter" value="12">
  <button type="submit">Absenden</button>
</form>
<pre id="protokoll"></pre>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #fafaf9;
  cursor: pointer;
}

input,
select,
textarea {
  padding: 0.35rem 0.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
}

const protokoll = document.getElementById("protokoll");

// novalidate am Formular schaltet die eingebauten Meldungen
// ab. Man tut das genau dann, wenn man eigene anzeigt, sonst
// stehen zwei Meldungen zu derselben Sache da.

// Das Muster aus Abschnitt 9. Bewusst grob: eine Adresse
// wirklich zu prüfen geht nur, indem man ihr etwas schickt.
const EMAIL = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;

function pruefe(feld) {
  const wert = feld.value.trim();
  if (feld.id === "email") {
    return EMAIL.test(wert) ? "" : "Bitte gib eine gültige E-Mail an";
  }
  return Number(wert) >= 18 ? "" : "Bitte gib ein Alter ab 18 an";
}

document.getElementById("formular").addEventListener("submit", (event) => {
  event.preventDefault();
  for (const feld of document.querySelectorAll("input")) {
    protokoll.textContent = `${protokoll.textContent}${feld.name}: ${pruefe(feld) || "in Ordnung"}\n`;
  }
});

console.log("Schick ab, ändere die Werte, schick wieder ab.");

<form id="formular" novalidate>
  <p>
    <label for="email">E-Mail</label>
    <input id="email" name="email" value="" aria-describedby="fehler-email">
    <span class="hinweis" id="fehler-email"></span>
  </p>
  <button type="submit">Absenden</button>
</form>

.feld-fehler {
  color: #b91c1c;
  font-weight: 700;
}

[aria-invalid="true"] {
  border: 2px solid #b91c1c;
}

const feld = document.getElementById("email");
const ziel = document.getElementById("fehler-email");

function melde(meldung) {
  // Der Text steht neben dem Feld, nicht irgendwo oben.
  ziel.textContent = meldung;

  // Eine Klasse macht ihn sichtbar, das Aussehen bleibt im CSS.
  ziel.classList.toggle("feld-fehler", meldung !== "");

  // aria-invalid sagt einem Screenreader, dass dieses Feld
  // das Problem ist. Zusammen mit aria-describedby im Markup
  // wird der Text dann beim Fokus mit vorgelesen.
  feld.setAttribute("aria-invalid", meldung !== "" ? "true" : "false");
}

document.getElementById("formular").addEventListener("submit", (event) => {
  event.preventDefault();
  melde(feld.value.includes("@") ? "" : "Bitte gib eine gültige E-Mail an");
});

// Beim Tippen wird erst dann neu geprüft, wenn schon eine
// Meldung steht. Sonst meckert die Seite beim ersten Zeichen.
feld.addEventListener("input", () => {
  if (feld.getAttribute("aria-invalid") === "true") {
    melde(feld.value.includes("@") ? "" : "Bitte gib eine gültige E-Mail an");
  }
});

console.log("Schick leer ab und tipp dann eine Adresse.");