Vue.js + Vuelidate: Formular-Validierung der einfachen Art

Wenn es zu einer Interaktion zwischen einer Website und einem Benutzer kommt, so handelt es sich oftmals um eine Form der Datenübermittlung. Ob Anmeldung, Suche oder das Ausfüllen eines Kontaktformulars: Formulare sind omnipräsent im World Wide Web, auch wenn sie nicht immer bewusst wahrgenommen werden. Gerade weil Formulare so essenziell für die Interaktion mit dem Benutzer sind, sollte eine sorgfältige Umsetzung nicht zu kurz kommen. Dazu gehört, dass die eingegebenen Daten nicht nur serverseitig (also bei der Verarbeitung) kontrolliert werden. Vielmehr sollte vorab bereits bei der Eingabe im Browser Feedback an den Nutzer ausgespielt werden. Dies erhöht die Benutzerfreundlichkeit und verhindert eventuelle Abbrüche durch lange Ladezeiten oder Frust. Aber ganz wichtig: Eine clientseitige sollte niemals die serverseitige Validierung ersetzen.

Clientseitige Formularvalidierung

In diesem Kontext ist zu erwähnen, dass es zwei verschiedene clientseitige Validierungsmöglichkeiten gibt:

• Zum einen können voreingebaute Features von HTML5 genutzt werden. Darunter zählen u. a. die Attribute `required`, `minLength` oder `type`. Diese können direkt im HTML-Code gesetzt werden und sorgen dafür, dass die Eingabefelder nicht leer übermittelt werden dürfen, einer gewissen Mindestlänge oder einem vorgegebenen Typ (z.B. Passwort) entsprechen müssen. Die Implementierung geht auf die Browserengine zurück, weswegen man vorab prüfen sollte, welche Attribute generell zur Verfügung stehen und wie deren Unterstützung über verschiedene Browser hinweg gewährleistet ist.
• Zum anderen können Formulare durch den Einsatz von JavaScript als clientseitige Programmiersprache validiert werden. Diese Validierung ist individuell anpassbar und kann genau nach den Vorstellungen und Wünschen des Entwicklers gestaltet werden.

Wer sich für den Einsatz von JavaScript entscheidet, kann dies natürlich in Eigenregie tun oder sich für eine vorgefertigte Lösung in Form einer Programmierbibliothek entscheiden. Wie der Titel dieses Beitrags vermuten lässt, bedienen wir uns in diesem Beispiel der Hilfe von Vue.js und Vuelidate.

Vue.js und Vuelidate

Vue.js ist ein clientseitiges JavaScript-Webframework zum Erstellen von Single-Page-Applications. Es wurde 2014 von Evan You entwickelt und erfreut sich seitdem großer Beliebtheit. Oft wird es bereits in einem Satz mit großen Frameworks wie Angular und React verwendet und Google Suchanfragen wie „which frontend framework to use“ führt Vue.js in den Top 10 Ranglisten an hoher Stelle. Vue.js kann sowohl in komplexen Projekten verwendet werden, in denen das komplette Frontend durch Vue.js gesteuert wird, es kann sich aber auch sehr leicht in bestehende Projekte integrieren lassen, um einzelne Elemente zu verbessern.

Vue.js hat zwar keine direkte Implementierung einer Formularvalidierung, dafür wird dieses Anwendungsszenario aber durch das Package Vuelidate abgedeckt. Dieses bietet eine einfache und leichtgewichtige Validierung an und ist sehr einfach zu verwenden.

Validierung

In unserem Beispiel betrachten wir ein Registrierungsformular, dass die Eingabe eines Vor- und Nachnamens, einer E-Mail-Adresse, eines Passworts und der Zustimmung der Datenschutzbestimmungen benötigt.

In einem ersten Schritt müssen wir die beiden Bibliotheken Vue.js und Vuelidate importieren und für uns verfügbar machen.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="/src/vuelidate.min.js"></script>

<script src="/src/validators.min.js"></script>

Abbildung 1

Im nächsten Schritt erstellen wir eine Vue-Instanz, die über das `el`-Attribut mit dem entsprechenden DIV-Element (welches unser Formular enthält) verbunden wird und stellen Vuelidate als globales Plugin zur Verfügung.

   Vue.use(window.vuelidate.default);

   new Vue({
   el: "#validation",
   data: {},
})
	Abbildung 2

Für jedes Feld, das wir validieren möchten, müssen wir ein Data-Attribut erfassen. Dieses dient als Grundlage für die Validierung. In unserem Beispiel entsprechend die folgenden Felder:

   data: {
   vorname: '',
   nachname: '',
   email: '',
   passwort: '',
   passwort2: '',
   datenschutz: false
 },
	Abbildung 3

Diese Attribute müssen wiederum als Schlüssel in dem Validations-Objekt erstellt werden, welches uns durch Vuelidate bereitgestellt wird. Hier können wir nun angeben, welche Validatoren wir für unseren Input verwenden möchten.

Unter https://vuelidate.js.org/#validators ist eine Liste aller verfügbaren Validatoren zu finden, für unser Beispiel benötigen wir die fünf wohl gängigsten, die wir uns als Variablen abspeichern können.

   var required = validators.required;
 var minLength = validators.minLength;
 var maxLength = validators.maxLength;
 var email = validators.email;
 var sameAs = validators.sameAs;
	Abbildung 4

Diese weisen wir nun in dem Validations-Objekt den einzelnen Feldern zu. Exemplarisch betrachten wir den Vornamen. Dieser darf generell nicht unausgefüllt bleiben, sollte zudem aber noch einer Mindestlänge von 3 Zeichen und einer Maximallänge von 30 Zeichen entsprechen.

   validations: {
    vorname: {
      required,
      minLength: minLength(3),
      maxLength: maxLength(30)
    }
 }
	Abbildung 5

So weit so gut, wie können wir jetzt aber auf diese Merkmale zurückgreifen und entsprechende Meldungen an den Nutzer ausgeben? Dazu sollten wir uns den aktuellen Status der Validierung einmal genauer anschauen. Dieser ist über das Attribut `$v` einsehbar und weist folgende Struktur auf:

   {
  "vorname": {
    "required": false,
    "minLength": true,
    "maxLength": true,
    "$model": "",
    "$invalid": true,
    "$dirty": false,
    "$anyDirty": false,
    "$error": false,
    "$anyError": false,
    "$pending": false,
    "$params": {
      "required": {
        "type": "required"
      },
      "minLength": {
        "type": "minLength",
        "min": 3
      },
      "maxLength": {
        "type": "maxLength",
        "max": 30
      }
    }
  }
	Abbildung 6

Hier finden wir unsere Validatoren wieder, die wir dem Vornamen zugeordnet haben, aber auch noch eine Reihe anderer Attribute. Ich möchte hier nicht zu weit ausschweifen, daher gehe ich hier nur auf die für dieses Beispiel verwendeten Attribute `$model`, `$dirty` und `$error` ein.

   <input 
    class="uk-input" placeholder="Vorname" 
    v-model.trim="$v.vorname.$model"
    :class="{ 'uk-form-danger': $v.vorname.$error }">
                            
    <div class="uk-text-danger" v-if="!$v.vorname.required && $v.vorname.$dirty">
        Bitte einen Vornamen angeben.
    </div>
    <div class="uk-text-danger" v-if="!$v.vorname.minLength">
        Bitte min. {{$v.vorname.$params.minLength.min}} Zeichen verwenden.
    </div>
    <div class="uk-text-danger" v-if="!$v.vorname.maxLength">
        Bitte max. {{$v.vorname.$params.maxLength.max}} Zeichen verwenden.
    </div>
	Abbildung 7

Schauen wir uns den obigen Code einmal Schritt für Schritt an:

• Das `$model`-Attribut referenziert auf das Originalmodel `vorname`, welches wir unter `data` erfasst haben. (Abbildung 3)
• V-model (einer von Vue.js bereitgestellten Direktive) ermöglicht uns ein Two-Way-Databinding, was bedeutet, dass das `$model`-Attribut mit der Eingabe des Benutzers beschrieben wird.
• Sobald der Nutzer das Input-Feld Vorname angeklickt und wieder verlassen hat, wird der `$dirty` Flag auf true gesetzt.
• In Verbindung mit dem `required` Flag, können wir also eine entsprechende Fehlermeldung ausgeben.
• Falls der Nutzer das Feld zur Kenntnis genommen aber nicht ausgefüllt hat, soll die Fehlermeldung „Bitte einen Vornamen angeben.“ ausgegeben werden.
• Falls der `minlength` Flag auf `false` gesetzt ist, geben wir wiederum eine Fehlermeldung aus, die auf die Mindestzahl an Zeichen hindeutet (Analog für die maximale Zeichenanzahl verwenden).

   :class="{ 'uk-form-danger': $v.vorname.$error }"
	Abbildung 8

Mittels der Codezeile Y wird dem Eingabefeld eine rote Umrandung zugewiesen, falls ein Fehler bei der Validierung auftritt. Falls das Feld also unausgefüllt ist oder nicht der gewünschten Zeichenanzahl entspricht.

Hier siehst du nochmal genau, wie sich die Attribute bei einer Beschreibung des Inputfeldes verhalten.

Vorteile

So weit so gut, bisher wurden aber nur solche Valdierungsregeln vorgestellt, die wir auch direkt über HTML5 mit weniger Aufwand hätten implementieren können. Warum also den extra Aufwand?

• Zum einen hat die Lösung mit Vuelidate den Vorteil, dass wir eine vollständige Kontrolle über die Fehlerausgabe erhalten; wir können entscheiden wie und in welcher Form wir unserem Nutzer eine Meldung ausgeben.
• Zum anderen bietet Vuelidate noch durchaus mehr als nur die genannten Standartoperatoren. So können wir beispielsweise mit nur einer Zeile überprüfen, ob der Nutzer sein Passwort richtig wiederholt hat.

   passwort2: {
     sameAsPassword: sameAs('passwort')
},
	Abbildung 9

Genauso einfach könnten wir Inputfelder auf gültige IP-Adressen oder Urls überprüfen und mit „and“, „or“ und „not“ verschiedenste Szenarien mit Leichtigkeit individuell validieren.
Außerdem ermöglicht uns Vuelidate, eigene Validatoren zu erstellen.

   datenschutz: {
    checked(val) {
        return val;
    }
}
	Abbildung 10

Der obige Validator überprüft beispielsweise, ob der Datenschutz als gelesen markiert wurde. Über val haben wir Zugriff auf den aktuellen Wert der Checkbox (`true` oder `false`) und durch eine einfache Rückgabe wird die Checkbox in den Validierungsstatus aufgenommen.

Absenden von Formularen

Zu guter Letzt bleibt wohl noch die Frage nach dem Abschicken des Formulars. Was passiert, wenn das Formular abgeschickt wird, ohne dass der Nutzer auch nur einen einzigen Wert angegeben hat? Aus dem Status unseres Vornamens ist ersichtlich, dass dieser zu Beginn ein Fehler Flag enthält, welches auf false gesetzt ist. Bedeutet das, dass ein direktes Abschicken des Formulars keinen Fehler erzeugt?

Nein, nicht wenn wir die von vuelidate zur Verfügung gestellte touch-Methode verwenden, die alle `$dirty` Flags auf `true` setzt, wodurch alle anderen Flags ausgelöst werden. Dazu erstellen wir eine Vue.js Methode, die wir bei einem Submit ansprechen.

   <form @submit.prevent="submit"> 
    methods: {
        submit() {
            console.log('Formular abgeschickt...')
            this.$v.$touch();
            if (this.$v.$invalid) {
               console.log('Fehlgeschlagen :(');
            } else {
                console.log('Erfolgreich :)');
            }
        }
      }
	Abbildung 11

Falls der Nutzer also versucht das Formular unvollständig abzuschicken, wird die `$touch`-Methode ausgeführt, was zur Folge hat, dass alle anderen Flags ausgelöst werden und eine Überprüfung auf `$invalid` das Abschicken des Formulars verhindert.

Das war es auch schon von meiner Seite. Viel Spaß beim Ausprobieren.

Disclaimer: Natürlich stellt eine clientseitige Validierung nur eine Seite der Medaille dar. Um die Daten unserer Benutzer und auch uns schützen zu können, müssen wir neben der clientseitigen auch eine serverseitige Validierung implementierten. Wie diese aussehen könnte erfährst du hier.