Neben der Feld-Validierung mittels Regex-Muster (siehe UUX: Regex zur Feld-Validierung nutzen) gibt es auch die Möglichkeit einer benutzerdefinierte Feld-Validierung. Dabei kannst du ganz einfach eigene Entscheidungsbäume mittels Javascript definieren und benutzerdefinierte Fehlermeldungen zurückgeben.
In diesem Artikel möchte ich dir die Verwendung dieser Validierung in einem Beispiel zeigen. Dabei habe ich einen sehr einfachen Dialog angelegt, welcher die Konfiguration eines Datenproviders vornehmen wird:
Sofern die Checkbox IsCloud aktiviert ist, wird zusätzlich zum Regex-Pattern für URLs auch die Endung M42Services/ der eingegebenen URL geprüft. Ist die URL nicht gültig (egal ob Cloud oder nicht) wird ein Fehler angezeigt und der Dialog kann nicht gespeichert werden.
Vorbereitungen
Um den Artikel etwas kürzer halten zu können, habe ich bereits einige Objekte vorbereitet.
Es existiert bereits eine Datendefinition, welche ein Attribut mit dem Namen Ud_Url (String) sowie ein Bool mit dem Namen Ud_IsCloud enthält:
Auch das Konfigurationselement (Type) ist bereits angelegt und beinhaltet die zuvor erstellte Datendefinition:
Der Dialog für diesen Type ist ebenfalls schon vorbereitet und beinhaltet bereits die beiden Attribute der Datendefinition:
Dialog mit der benutzerdefinierte Feld-Validierung
Um nun die Benutzerdefinierte Validierung nutzen zu können, müssen wir zunächst ein neues Attribut vom Typ Object im erweiterten Modus anlegen:
Dieses Attribut befüllen wir nun mit dem Javascript-Code, welcher für uns die logische Prüfung übernimmt. Dabei muss der Code ein Javascript-Objekt nach dem folgenden Schema zurückgeben:
<em>{IsValid: <Bool-Wert>, ErrorMessage: <String-Wert oder Lokalisierung>}</em>Code-Sprache: HTML, XML (xml)Damit wir für die Validierung auch auf die beiden Attribute zugreifen können, müssen wir diese zunächst hinzufügen. Dazu einfach auf Hinzufügen klicken und das gewünschte Attribut wählen. Zunächst fügen wir das Attribut Ud_IsCloud hinzu, welches später den jeweiligen Regex-Ausdruck steuern wird:
Das gleiche muss dann auch noch einmal für das Attribut Ud_Url erledigt werden, welches später die zu prüfende URL beinhalten wird:
Nun sind beide Attribute dem erweiterten Modus verknüpft:
Auch das Skript kann nun im Bereich Ausdruck (Javascript) hinzugefügt werden:
Im Skript wird zunächst der Regex-Ausdruck in eine Variable geschrieben und – sofern die Checkbox aktiviert ist – mit einem neuen Ausdruck zur erweiterten Prüfung überschrieben.
Im Anschluss wird dann die Methode test() der RegExp-Klasse von Javascript zur Prüfung verwendet. Ist der Test erfolgreich wird ein positives Objekt mit dem Wert IsValid: true zurückgegeben. Andernfalls ist der Wert IsValid: false und die ErrorMessage wird definiert.
Neben einer fixen ErrorMessage können übrigens auch Lokalisierungen im Javascript verwendet werden.
Um dieses nutzen zu können, muss eine Lokalisierung angelegt und als Attribut im erweiterten Modus verknüpft werden:
Mehr dazu in diesem Artikel: UUX: Lokalisierungen in Skripten verwenden
Hier auch noch einmal der komplette Quellcode mit Lokalisierungsstring (localStr1) im Klartext:
var regexStr = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
if(udIsCloud.$value) {
regexStr = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*)(?=m42service\/$)/g;
}
const regex = new RegExp(regexStr);
if (regex.test(udUrl.$value)) {
return {IsValid: true, ErrorMessage: ""};
} else {
return {IsValid: false, ErrorMessage: localStr1};
}Code-Sprache: PHP (php)Tipp: Die Seite https://regex101.com stellt übrigens eine sehr einfache Möglichkeit zum testen von Regex-Ausdrücken bereit.
Das neu angelegte Attribut muss nun noch mit dem Textbox-Control verknüpft werden, damit die Prüfung des Feldes aktiviert wird:
Das Ergebnis
Nun können wir den Dialog öffnen, um das Ergebnis zu testen. Geben wir nun eine ungültige URL an, wird das Textbox-Control als Invalid deklariert und die von uns angegebene Fehlermeldung wird angezeigt. Gleichzeitig wird der gesamte Dialog als Ungültig definiert und er kann nicht gespeichert werden:
Wird jedoch eine gültige URL angegeben passt alles und wir können den Dialog auch wieder speichern:
Aktivieren wir nun die Checkbox IsCloud, wird die Validierung erneut ausgeführt. Nun ist die URL allerdings erneut nicht valide, da sie nicht mit dem String m42service/ endet:
Passen wir die URL erneut dem Schema entsprechend an, wird dieser neue Wert auch akzeptiert:
Wie uns dieses sehr einfache Beispiel gezeigt hat, können mit Hilfe der benutzerdefinierten Validierung, wirklich extrem mächtige Prüfungen implementieren. Dabei sind dem Ganzen nahe zu keine Grenzen gesetzt. So kannst du zum Beispiel auch weitere Datenquellen für eine Prüfung mit einbeziehen und so auch ASQL-Filter zur erweiterten Prüfung von Feldern nutzen.
