| Was wäre ein Formular ohne Überprüfung der von dem Nutzer eingegeben Daten? Um genau Das soll es in diesem Tutorial gehen. Für die Validierung der Eingaben wird das Prinzip der konditionalen Logik erklärt. |
- Axure Version: 8.0
- Level: Advanced
- Dauer: 30 min
- Themen: Axure Advanced, Konditionale Logik, Validierung, Navigation, Formular, Eingabefeld
|
Preview:
Das Konzept
Gibt der Nutzer etwas in einem Eingabefeld (Text Field) ein, ist es wichtig ihm ein Feedback zu geben, ob er alles richtig gemacht hat. Ist die Eingabe fehlerfrei, wird ihm ein grüner Haken angezeigt. Andernfalls zeigen wir ihm ein rotes Kreuz. Dies erreichen wir über eine if-Abfage und dem Event OnLostFocus.
1 Vorbereitung
Erstelle ein Registrierungsformular mit einer Überschrift, vier Eingabefeldern, einer Checkbox und einen Button. Wie du dieses Formular erstellst wird genauer in dem Tutorial Registrierungsformular mit Tab erklärt.
Registrierungsformular
2 Validierungsstatus erstellen
Um dem Benutzer zu zeigen, ob seine Eingabe korrekt ist, erstelle ein Dynamic Panel mit zwei States. Der erste State heißt „OK“, der zweite „Fehler“. Füge in dem State „OK“ einen grünen Haken ein, der zeigt, dass die Eingabe fehlerfrei ist. In dem anderen State „Fehler“ füge ein rotes Kreuz ein, welches auf einen Fehler hinweist.
Dynamic Panel: „Validierung Nutzername“
State 1: „OK“ – State 2: „Fehler“
Kopiere und füge nun dieses Dynamic Panel hinter jedem Eingabefeld ein. Benenne jedes entsprechend der Funktion des jeweiligen Eingabefeldes (Zum Beispiel „Validierung Nutzername“). Setzte anschließend die Dynamic Panels auf Hidden.
Die Dynamic Panels des Validierungsstatus auf Hidden setzten
3 Konditionale Logik der Eingabefelder
Nun wollen wir die Logik auf den Eingabefeldern definieren, um den richtigen Validierungsstatus anzuzeigen. Benutze das Event OnLostFocus. Hier werden wir nun die Logik definieren, damit entweder der Haken oder das Kreuz angezeigt wird, nachdem der Nutzer das Eingabefeld verlassen hat.
Das Event OnLostFocus auswählen
Nach einem Doppelklick auf ein Event, öffnet sich der Case Editor, in dem du Aktionen (Actions) definierst.
Mit Aktionen kannst du unter anderem Zustände von Widgets manipulieren. Der erste Fall, den wir definieren möchten, heißt „Eingabe OK“.
Fall im Case Editor benennen
Der Fall „Eingabe OK“ soll nur unter bestimmten Bedingungen (Conditions) zutreffen. Klicke dazu im Case Editor auf Add Condition. Dadurch öffnet sich der Condition Builder, in dem du Bedingungen spezifizieren kannst.
Die Aktionen sollen nur dann ausgeführt werden, wenn das Eingabefeld nicht leer ist. In dem Condition Builder heißt das: wenn der text on widget this (also der Text aus dem ausgewählten Eingabefeld) does not equal value (nicht den Wert) leer entspricht.
Bedingungen im Condition Builder festlegen
Nachdem du die Bedingung festgelegt hast, legst du nun die Aktionen fest. Bei unserem Registrierungsformular erscheinen hinter dem Eingabefeld ein grüner Haken, wenn etwas in dem Eingabefeld eingetragen wird. Benutze dafür die Aktion Set Panel State und wähle das Dynamic Panel aus, welches den Validierungsstatus anzeigen soll. Wir behandeln gerade die Validierung des Feldes „Data: Nutzername“ und wählen daher das Panel „Validierung Nutzername“, welches wir in den State „OK“ versetzten. Wähle zusätzlich die Option Show panel if hidden aus.
Aktionen für den Fall „Eingabe OK“ definieren
Ganz ähnlich brauchen wir nun noch einen Fall der einen Fehler anzeigt, wenn der Nutzer den Text im Eingabefeld wieder komplett löscht oder gar nichts eingegeben hat.
Füge deshalb unter dem selben Event OnLostFocus über Add Case einen weiteren Fall hinzu und benenne ihn „Eingabe leer“.
In den Aktionen setzte das Panel für den Validierungsstatus in diesem Fall in den State „Fehler“. Wähle auch hier die Option Show panel if hidden.
Else If True Fall definieren
In dem Fenster Widget Interactions and Notes steht bei diesem Fall nun in Klammern Else If True, was bedeutet, dass dieser Fall immer nur dann ausgeführt wird, wenn der vorherige nicht zutrifft.
2 Fälle (Cases)
Diese Logik kannst du nun auch auf die anderen Eingabefelder anwenden. Am Ende sollte es bei allen Eingabefeldern eine Überprüfung der Eingabe geben.
Validierung nach Eingabe
Wie alle Felder und die Checkbox bei einem Klick auf dem Button „Registrieren“ überprüft werden, erfahrt ihr im zweiten Teil Formularvalidierung II – Funktionen auslagern. Dabei erklären wir euch gleich noch, wie man Logik als Funktion auslagern kann, damit man diese nicht mehrfach definieren muss.
