| Dieses Tutorial ergänzt Teil 1: Formularvalidierung – Konditionale Logik. Es wird gezeigt, wie man den Status der Checkbox überprüft und bei einem Klick auf den Button „Registrieren“ alle Eingaben auf einmal validiert. Damit man gleiche Abfragen nicht unnötig oft definieren muss, zeigen wir euch einen Trick, wie man diese als Funktion auslagern kann. |
- Axure Version: 8.0
- Level: Advanced
- Dauer: 30 min
- Themen: Axure Advanced, Konditionale Logik, Validierung, Formular , Eingabefeld, Funktionen
|
Preview:
Das Konzept
Bei dem OnClick Event auf dem Button „Registrieren“ sollen die Eingaben des Nutzers validiert werden. Auch die Zustimmung der Nutzungsbedingungen und der Datenschutzerklärung wird durch eine Checkbox über die Abfrage des Selected Zustandes überprüft. Die Logik wird dabei auf das OnMove Event ausgelagert, um die Überprüfung zu vereinfachen. Damit entsteht die Möglichkeit Aktionen an einer zentralen Stelle zu definieren, die auch durch Events von anderen Widgets ausgelöst werden können. Das schafft eine bessere Übersichtlichkeit und hilft uns, Interaktionen bei Bedarf schneller anzupassen.
1 Vorbereitung
Bearbeite erst das Tutorial Teil 1: Formularvalidierung – Konditionale Logik bevor du an dieser Stelle weitermachst. Am Ende des ersten Teils sollten alle Eingabefelder eine Validierung besitzen.
2 Konditionale Logik auslagern
Damit die logischen Abfragen und Interaktionen auch von anderer Stelle aufgerufen werden können, verwenden wir einen kleinen Trick. Klicke auf das erste Eingabefeld. Dort hatten wir die konditionale Logik auf dem Event OnLostFocus definiert. Wir werden nun für die Auslagerung ein anderes Event benutzen. Klicke dazu auf das Event OnLostFocus und schneide die komplette Logik über den Shortcut cmd+X / strg+X aus.
Logik auf das Event OnMove auslagern
Klicke nun auf More Events und wähle „Paste“ von dem Event OnMove.
Logik auf das Event OnMove auslagern
Um das OnMove Event auch anzusprechen, klicke in dem Fenster Widget Interactions and Notes unter den Interactions auf das Event OnLostFocus. Nenne diesen Fall „Eingabe validieren“ und benutze die Aktion Move, um dieses Widget (This Widget) um (by) 0 Pixel in der X- und Y-Richtung zu bewegen. Dadurch wird das Event OnMove immer dann ausgelöst, wenn das Eingabefeld nicht mehr fokussiert ist.
Das Event OnMove über OnLostFocus Event ansprechen
Die Interaktionen für ein Eingabefeld mit konditionaler Logik sehen dann so aus:
Interaktionen eines Eingabefeldes
Wende nun diese Struktur der Logik auch auf die anderen Eingabefelder an.
3 Konditionale Logik der Checkbox
Die konditionale Logik für die Checkbox ist vom Prinzip her identisch, allerdings müssen andere Interaktionen und Aktionen gesetzt werden.
Füge der Checkbox einen Fall auf dem Event OnMove hinzu und benenne diesen „nicht angekreuzt“.
Als Aktion wähle Set Text und benutze die Option rich text. Wir brauchen diese Option, damit wir, wenn der Haken nicht gesetzt wurde, den Text rot einfärben können.
Set Text mit der Option rich text im Fall „nicht angekreuzt“
Klicke nun auf Edit text…. Daraufhin öffnet sich ein neues Fenster in dem unter anderem der Style des Textes genauer angepasst werden kann. Färbe den Text rot ein, um dem Nutzer einen Fehler zu signalisieren.
Style des Textes verändern
Füge der Checkbox auf dem Event OnMove einen weiteren Fall hinzu und benenne diesen „angekreuzt“. Füge hier eine Bedingung hinzu. In unserem Fall können die im Condition Builder vorausgewählte Bedingung einfach übernehmen. Dieser Fall wird nur dann ausgelöst, wenn die Checkbox selektiert ist und somit der Selected Zustand den Wert true hat.
Bedingung des Falls „angekreuzt“ defineren
Verwende auch hier die Aktion set Text mit der Option rich text. Dadurch wird der Text wieder Schwarz eingefärbt, sobald der Haken gesetzt wird.
Set Text mit der Option rich text im Fall „angekreuzt“
Nun muss nur noch die Reihenfolge der Fälle verändert werden. Selektiere dazu den Fall „angekreuzt“ und verschiebe ihn per Drag & Drop über den Fall „nicht angekreuzt“.
Reihenfolge der Fälle verändern
Das Ergebnis sollte dann so aussehen:
Konditionale Logik der Checkbox
5 Abschließende Validierung
Bei einem Klick auf den Button „Registrierung“ sollen die Eingaben des Nutzers überprüft werden. Dazu füge einen Fall dem OnClick Event auf dem Button „Button Registrieren“ hinzu und benenne diesen „Eingaben validieren“.
Nun wird sich gleich zeigen, warum wir vorher die Validierung der Eingabefeldern und der Checkbox auf das OnMove Event ausgelagert haben. Alles was du nun machen musst, ist die Eingabefelder und die Checkbox sich einmal bewegen zu lassen. Wähle also die Aktion Move und setzte einen Haken bei den Eingabefeldern und der Checkbox.
Eingabefelder und Checkbox validieren
Als letztes brauchen wir noch den Fall „Registrierung schließen“, den du vielleicht noch aus dem Tutorial Registrierungsformular mit Tab kennst. In diesem wird das Registrierungsformular geschlossen bzw. versteckt. In diesem Tutorial bekommt dieser nun einige Bedingungen, damit die Registrierung erst dann erfolgt, wenn alle Felder ausgefüllt un die Checkbox selektiert ist.
Frage zum einen ab in welchem State sich die Dynamic Panels befinden, die einen Validierungsstatus zeigen. Bei ausschließlich richtigen Eingaben des Nutzers sollten sie alle im State „OK“ sein. Das heißt in der Abfrage state of panel das jeweilige Dynamic Panel equals state „OK“. Außerdem muss abgefragt werden, ob die Checkbox, bei uns mit dem Namen „Nutzungsbedingungen & Datenschutzerklärung“, selektiert ist. Das heißt wähle is selected of die Checkbox equals value true.
Bedingungen des Falls „Registrierung schließen“
Verwende die Aktion hide und wähle das Dynamic Panel, welches dein Registrierungsformular umschließt aus. Wir haben noch einen fade 500 ms hinzugefügt, um das Formular schöner auszublenden.
Aktion des Falls „Registrierung schließen“
Damit immer zuerst die Validierung und im Anschluss die Abfragen, ob alle Eingaben korrekt waren, stattfindet, muss der Fall „Registrierung schließen“ verändert werden. Klicke dazu mit der rechten Maustaste in den Widget Interactions and Notes auf den Fall „Registrierung schließen“. Hier gibt es die Option Toggle IF/ELSE IF, welche den Fall „Registrierung schließen“ zwischen If und Else If wechseln lässt.
Option Toggle IF/ELSE IF
Somit bekommen wir zwei If Abfragen auf dem OnClick Event, die immer beide und in der entsprechenden Reihenfolge durchlaufen werden.
Konditionelle Logik der abschließenden Validierung
Nun solltest du ein Registrierungsformular mit funktionierender Validierung haben.
Falls du an dieser Stelle noch weiter machen möchtest, versuche dich doch mal an zusätzlichen Abfragen. Du könntest zum Beispiel prüfen, ob das Passwort in den dazugehörigen Eingabefeldern wirklich gleich ist oder das Eingabefeld für die E-Mail auch ein @-Zeichen beinhaltet.
Bei der Komplexität einer Validierung sind dir keine Grenzen gesetzt.
eparo Tipp: Du solltest immer berücksichtigen, dem Nutzer auch eine verständliche Fehlermeldung anzuzeigen, die das Problems möglichst genau beschreibt und am besten noch eine passende Lösung vorschlägt.
Eine einfache Fehlermeldung findest du auch in dem Tutorial Login mit Fehlermeldung.
