Wie kann ich in Freeform Formularfelder validieren?
- Grundlagen der Validierung in Freeform
- Pflichtfelder und einfache Validierungen
- Erweiterte Validierung mittels regulären Ausdrücken (Regex)
- Clientseitige Validierung mit HTML5 und JavaScript
- Serverseitige Validierung und individuelle Regeln
- Kurzes Fazit
Grundlagen der Validierung in Freeform
Freeform ist ein flexibles Formular-Plugin für Craft CMS, welches es ermöglicht, Formulare einfach zu erstellen und zu verwalten. Die Validierung der Formularfelder ist essenziell, um sicherzustellen, dass die Benutzereingaben korrekt und vollständig sind. Freeform bietet dafür verschiedene Möglichkeiten zur Validierung, die sowohl serverseitig als auch clientseitig funktionieren.
Die meisten Validierungen werden über die Feldkonfiguration innerhalb von Freeform realisiert. Dabei definiert man bei der Erstellung oder Bearbeitung eines Formularfeldes bestimmte Regeln, wie z.B. Pflichtfelder, das erwartete Format oder eigene Regex-Muster.
Pflichtfelder und einfache Validierungen
Innerhalb des Freeform Control Panels kann im Bereich des jeweiligen Feld-Typs das Feld als Required (Pflichtfeld) markiert werden. Wenn ein Benutzer das Formular absendet und das Feld leer bleibt, wird ein standardmäßiger Validierungsfehler angezeigt und das Formular wird nicht abgeschickt.
Neben der Pflichtfeld-Einstellung gibt es oft für bestimmte Feldtypen wie E-Mail, Zahlen oder URLs vorgefertigte Validierungen, die automatisch zuständig sind, um sicherzustellen, dass das Feld im richtigen Format ausgefüllt ist.
Erweiterte Validierung mittels regulären Ausdrücken (Regex)
Für spezielle Anforderungen bietet Freeform die Möglichkeit, ein benutzerdefiniertes Validierungsmuster basierend auf regulären Ausdrücken einzubinden. Hierfür kannst du bei einem Feld unter den Einstellungen eine Regex angeben, die auf die Eingabe angewendet wird. Nur wenn die Eingabe dem Muster entspricht, wird die Validierung erfolgreich sein.
Ein Beispiel für ein einfaches Regex-Validierungsmuster könnte die Sicherstellung sein, dass ein Feld nur Zahlen enthält: ^\d+$. Diese Einstellung sorgt dafür, dass nur Eingaben akzeptiert werden, die ausschließlich aus einer oder mehreren Ziffern bestehen.
Clientseitige Validierung mit HTML5 und JavaScript
Freeform nutzt HTML5 für einige Validierungen automatisch, etwa das Attribut required oder type="email" für E-Mail-Eingaben. Diese Validierungen werden unmittelbar im Browser ausgeführt, bevor das Formular überhaupt an den Server gesendet wird. Das erhöht die Benutzerfreundlichkeit, weil Eingabefehler sofort angezeigt werden.
Darüber hinaus kannst du eigenes JavaScript für komplexere oder dynamische Validierungsszenarien hinzufügen. Dazu implementierst du im Frontend Listener, die z.B. beim Abschicken oder beim Verlassen eines Feldes (blur-Event) prüfen, ob die Eingaben den gewünschten Kriterien entsprechen. Bei Fehlern kannst du benutzerdefinierte Fehlermeldungen anzeigen bzw. das Absenden verhindern.
// Beispiel: Einfache Validierung mit JavaScriptdocument.querySelector(form).addEventListener(submit, function(e) { var input = document.querySelector(input ); if (input.value.trim() === ) { e.preventDefault(); alert(Das Feld darf nicht leer sein!); input.focus(); }});Serverseitige Validierung und individuelle Regeln
Neben den vordefinierten Regeln im Freeform-Backend kannst du in Craft CMS und Freeform eigene Validierungslogik in PHP umsetzen. Freeform bietet Hooks und Events, bei denen du Formulareingaben überprüfen und ggf. validieren kannst, bevor die Daten gespeichert oder weiterverarbeitet werden.
So kannst du beispielsweise ein Plugin oder Module schreiben, das während des beforeSubmit-Events prüft, ob alle Felder den besonderen Anforderungen genügen, und bei Fehlern den Prozess abbricht und eine entsprechende Fehlermeldung zurückgibt.
Diese serverseitige Validierung ist besonders dann wichtig, wenn du sicherstellen möchtest, dass die Daten wirklich korrekt sind und nicht nur auf Grund einer clientseitigen Validierung manipuliert wurden. Sie ist also eine wichtige Sicherheitsebene.
Kurzes Fazit
Die Validierung in Freeform erfolgt vor allem über die Konfiguration der Formularfelder im Backend, wobei Pflichtfelder, bestimmte Feldtypen und reguläre Ausdrücke die Basis bilden. HTML5-Validierung sorgt für eine sofortige Feedback-Schleife im Browser, kann aber mit individuellem JavaScript ergänzt werden, um flexibel auf Spezialfälle zu reagieren. Für höchste Sicherheit empfiehlt sich zudem eine serverseitige Validierung in Craft CMS mit Hilfe von Hooks oder Modulen.