Vier Felder, die ihren Zweck nennen

<h1>Konto anlegen</h1>
<form id="registrierung" action="/registrieren" method="post">
  <div>
    <label for="name">Vor- und Nachname</label>
    <input id="name" name="name" required
      autocomplete="name">
  </div>

  <div>
    <label for="email">E-Mail-Adresse</label>
    <input id="email" name="email" type="email" required
      autocomplete="email">
  </div>

  <div>
    <label for="pw">Passwort</label>
    <input id="pw" name="passwort" type="password" required
      minlength="12" autocomplete="new-password"
      aria-describedby="pw-regeln">
    <p id="pw-regeln">
      Mindestens 12 Zeichen. Einfügen ist erlaubt.
    </p>
  </div>

  <div>
    <label for="pw2">Passwort wiederholen</label>
    <input id="pw2" name="passwort-wiederholung"
      type="password" required autocomplete="new-password"
      aria-describedby="pw2-fehler">
    <p id="pw2-fehler"></p>
  </div>

  <p>
    Wie wir Ihre Daten verarbeiten:
    <a href="/datenschutz">Datenschutzhinweise öffnen</a>
  </p>

  <button type="submit">Konto anlegen</button>
</form>
<script src="registrieren.js"></script>

const formular = document.getElementById('registrierung');
const passwort = document.getElementById('pw');
const wiederholung = document.getElementById('pw2');
const fehler = document.getElementById('pw2-fehler');
const text = 'Die Passwörter stimmen nicht überein.';

function fehlerLeeren() {
  if (passwort.value !== wiederholung.value) return;
  fehler.textContent = '';
  wiederholung.removeAttribute('aria-invalid');
}

passwort.addEventListener('input', fehlerLeeren);
wiederholung.addEventListener('input', fehlerLeeren);

formular.addEventListener('submit', (ereignis) => {
  if (passwort.value === wiederholung.value) return;
  ereignis.preventDefault();
  fehler.textContent = text;
  wiederholung.setAttribute('aria-invalid', 'true');
  wiederholung.focus();
});