Formularvalidierung leicht gemacht mit htmx

Formularvalidierung muss nicht bedeuten, bergeweise JavaScript zu schreiben. Wenn Sie es leid sind, Validierungszustände, Fehlermeldungen und DOM-Updates manuell zu verwalten, bietet htmx eine erfrischend einfache Alternative. Lassen Sie uns erkunden, wie sowohl client- als auch serverseitige Validierung mit minimalem Code und maximaler Benutzererfahrung implementiert werden kann.

Clientseitige Validierung mit htmx

Verwendung von hx-validate für sofortiges Feedback

Der einfachste Weg, clientseitige Validierung hinzuzufügen, ist mit hx-validate="true" in Ihrem Formular. Dies weist htmx an, HTML5-Validierungsattribute zu prüfen, bevor eine Anfrage gesendet wird:

<form hx-post="/submit" hx-validate="true">
  <input type="email" name="email" required>
  <input type="text" name="username" 
         pattern="[a-zA-Z0-9]{3,20}" 
         title="3-20 alphanumerische Zeichen">
  <button type="submit">Absenden</button>
</form>

Dieser Ansatz nutzt die eingebaute Browser-Validierung und bietet sofortiges Feedback ohne JavaScript zu schreiben.

Erweiterte Regeln mit der htmx-validation Extension

Für komplexere Validierungsszenarien bietet die htmx-validation Extension benutzerdefinierte Regeln:

<script src="https://unpkg.com/htmx.org/dist/ext/validate.js"></script>

<form hx-post="/submit" hx-ext="validate">
  <input name="password" type="password" 
         data-validate='{"required": true, "minLength": 8}'>
  <input name="confirm" type="password" 
         data-validate='{"equalTo": "password"}'>
  <button type="submit">Absenden</button>
</form>

Diese Extension unterstützt benutzerdefinierte Validierungsfunktionen und ist perfekt für Geschäftslogik, die HTML5-Attribute nicht abdecken können.

Serverseitige Inline-Validierung

Echtzeit-Feldvalidierung

Das mächtigste htmx-Formularvalidierungsmuster kombiniert serverseitige Logik mit Inline-Updates. So validieren Sie einzelne Felder während der Benutzereingabe:

<form hx-post="/register">
  <div>
    <label for="email">E-Mail</label>
    <input name="email" id="email" 
           hx-post="/validate/email" 
           hx-trigger="blur, keyup delay:500ms"
           hx-target="next .error"
           hx-swap="innerHTML">
    <span class="error"></span>
  </div>
  <button type="submit">Registrieren</button>
</form>

Ihr Server-Endpoint gibt Validierungs-Feedback zurück:

# Python/Flask Beispiel
@app.route('/validate/email', methods=['POST'])
def validate_email():
    email = request.form.get('email')
    if not email or '@' not in email:
        return '<span class="text-red">Ungültiges E-Mail-Format</span>'
    if email_exists_in_db(email):
        return '<span class="text-red">E-Mail bereits vergeben</span>'
    return '<span class="text-green">✓ Verfügbar</span>'

Vollständige Formularvalidierung mit partiellen Antworten

Für komplette Formularvalidierung geben Sie das gesamte Formular mit Fehlerzuständen zurück:

<form id="contact-form" 
      hx-post="/contact" 
      hx-target="this" 
      hx-swap="outerHTML">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Senden</button>
</form>

Der Server gibt das Formular mit Fehlerklassen und -meldungen zurück, wenn die Validierung fehlschlägt, oder eine Erfolgsmeldung, wenn sie erfolgreich ist.

Häufige Fallstricke und Lösungen

Button- vs. Formular-Attribute

Ein häufiger Fehler ist die Platzierung von hx-post auf dem Submit-Button anstatt auf dem Formular:

<!-- Falsch: Validierung wird nicht ausgelöst -->
<form hx-validate="true">
  <button hx-post="/submit">Absenden</button>
</form>

<!-- Korrekt: Validierung funktioniert -->
<form hx-post="/submit" hx-validate="true">
  <button type="submit">Absenden</button>
</form>

Behandlung von Validierungs-Events

htmx bietet Events für feinkörnige Kontrolle über den Validierungsablauf:

// Abfangen vor der Validierung
document.body.addEventListener('htmx:configRequest', function(evt) {
  if (evt.target.matches('[data-confirm]')) {
    evt.preventDefault()
    if (confirm(evt.target.dataset.confirm)) {
      evt.detail.issueRequest()
    }
  }
})

// Behandlung von Server-Validierungsfehlern
document.body.addEventListener('htmx:responseError', function(evt) {
  if (evt.detail.xhr.status === 422) {
    // Validierungsfehler vom Server anzeigen
    const errors = JSON.parse(evt.detail.xhr.response)
    showValidationErrors(errors)
  }
})

Best Practices für barrierefreie Validierung

Fügen Sie immer entsprechende ARIA-Attribute für Screenreader hinzu:

<input name="email" 
       aria-invalid="true" 
       aria-describedby="email-error">
<span id="email-error" role="alert">
  Bitte geben Sie eine gültige E-Mail ein
</span>

Verwenden Sie hx-trigger="blur" anstatt keyup für Felder, bei denen ständige Validierung störend sein könnte, wie Passwörter. Für Suche oder Benutzername-Verfügbarkeit bietet keyup delay:500ms eine gute Balance.

Fazit

htmx-Formularvalidierung glänzt dadurch, dass die Validierungslogik dort bleibt, wo sie hingehört – auf dem Server – während sie die reibungslose, responsive Erfahrung bietet, die Benutzer erwarten. Ob Sie clientseitige Validierung für sofortiges Feedback oder serverseitige Validierung für komplexe Regeln wählen, htmx reduziert das JavaScript, das Sie schreiben müssen, während es die Benutzererfahrung verbessert. Beginnen Sie mit hx-validate="true" für grundlegende Anforderungen und fügen Sie dann schrittweise Inline-Validierung für ein ausgereiftes, produktionsreifes Formular hinzu.

Häufig gestellte Fragen

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.