Validierung
Diese Funktion ermöglicht es die eingegebenen Daten zu prüfen. Diese Überprüfung kann direkt im Browser (Client) des Anwenders stattfinden oder erfolgt in einem Backendsystem. Es können beide Validierungen gleichzeitig verwendet werden.
Clientseitige Validierung
Für die clientseitige Validierung muss in der Formularkonfiguration ein dataSchema in Form eines JSON Schemas hinterlegt werden.
Mit diesem Schema lassen sich einfache, aber auch komplexe Bedingungen prüfen.
Das Schema wird immer auf die im state hinterlegten Daten angewendet.
Daher müssen alle Formularfelder, die zu prüfende Daten beinhalten, ihre Werte im Datenbereich binden.
Sollten bei der Prüfung Bedingungen nicht erfüllt sein, so werden entsprechende Fehlermeldungen an den Feldern angezeigt, die diese Daten binden.
|
Die clientseitige Validierung ist nicht ausreichend, um die Integrität der Daten für die weitere Verarbeitung abzusichern. Da diese im Browser des Anwenders ausgeführt wird, kann sie auch umgangen werden. Alle Daten sollten vor der Verarbeitung im Backend stets auf Integrität geprüft werden. |
Beispiel
{
"$schema": "http://bpc.virtimo.net/forms/1/schema",
"metaData": {
"author": "Virtimo AG",
"name": "Client Validation Form",
"id": "1",
"version": 1
},
"components": [
{
"layout": "vertical",
"components": [
{
"type": "textfield",
"value": "/data/textValue"
},
{
"type": "checkbox",
"value": "/data/boolValue"
},
{
"action": "validate",
"label": "validate",
"type": "button"
}
],
"label": "Client Validation",
"type": "container"
}
],
"dataSchema": {
"type": "object",
"properties": {
"textValue": {
"minLength": 20,
"type": "string",
"errorMessage":"Der Wert muss mindestens 20 Zeichen lang sein"
},
"boolValue": {
"const": true,
"type": "boolean",
"errorMessage":"Sie müssen die Checkbox anhaken"
}
}
},
"configuration": {
"defaultLanguage": "de"
},
"state": {
"data": {
"textValue": "to short value",
"boolValue": false
}
}
}Eingebettete Vorschau
Beispiel: Validierung mit regulären Ausdrücken
Es besteht auch die Möglichkeit, clientseitige Validierung anhand eines regulären Ausdrucks (Regex) durchzuführen.
Das Regex-Pattern soll in der Schema-Definition (dataSchema) von dem Property unter pattern angegeben werden.
|
In dem folgenden Beispiel wird ein Regex-Pattern angewendet, welches prüft, ob die Eingabe valide Zeichen für ein XML Dokument enthält (XML 1.0). Das Pattern ist wie folgt:
|
{
"metaData": {
"author": "Virtimo AG",
"name": "Live PReview Form",
"id": 999999,
"version": 1
},
"components": [
{
"type": "container",
"layout": "vertical",
"components": [
{
"type": "html",
"value": "<b>Live</b> View"
},
{
"id": "lastName",
"label": {
"de": "Nachname",
"en": "Lastname"
},
"type": "textfield",
"value": "/data/lastName"
}
]
}
],
"dataSchema": {
"properties": {
"lastName": {
"minLength": 1,
"description": "The last part of the name",
"type": "string",
"pattern": "^[\\u0020-\\uD7FF\\u0009\\u000A\\u000D\\uE000-\\uFFFD\\u10000-\\u10FFFF]*$",
"errorMessage": { (1)
"minLength": "Input should have than one character",
"pattern": "Input contains invalid characters for XML"
}
}
},
"type": "object"
},
"configuration": {
"validateOnChange": false,
"defaultLanguage": "de",
"validateOnBlur": true
},
"state": {
"data": {},
"language": "de"
}
}| 1 | Mit der Definition von errorMessage lassen sich Fehlermeldungen für verschiedene Validierungsfehler setzen |
Serverseitige Validierung
Für die serverseitige Validierung wird der aktuelle Zustand des Formulars an ein Backend (Server)
geschickt.
Dieser kann dann die Daten prüfen und sein Ergebnis wieder zurücksenden.
Vom Backend gemeldete Validierungsfehler werden an den entsprechenden Feldern im Formular dargestellt.
Damit diese Form der Validierung funktioniert, muss in der Formularkonfiguration eine
validationUrl konfiguriert sein.
Request
Die Anfrage, die an den Server geschickt wird, sieht wie folgt aus:
{
"action":"validate",
"originator":{}, (1)
"form":{} (2)
}| 1 | Enthält Informationen von wem oder was die Validierung angestoßen wurde. Z.B. ein Button oder ein Event |
| 2 | Enthält die aktuelle Formularkonfiguration inklusive des aktuellen Zustands der Daten |
Response
In der Antwort vom Server wird nach dem Attribut validationErrors geschaut.
Dieses Attribut muss ein Array enthalten.
Jeder Eintrag des Arrays wird als Validierungfehler gewertet.
Jeder Fehler enthält einen Fehlertext message, der im Formular dargestellt wird.
Außerdem sollte der Fehler mittels instancePath auf das Datum im Datenbereich des state zeigen, der den Fehler hervorgerufen hat.
{
"validationErrors": [
{
"instancePath": "/textValue", (1)
"message": "validation error"
}
]
}| 1 | Bezieht sich auf /data/textValue im state |
|
Jede Server Response prüft auf |
Validierung auslösen
Eine Validierung kann durch Button oder verschiedenen Events (siehe validateOnBlur und validateOnChange) ausgelöst werden.
Dabei wird die Clientseitige Validierung immer durchgeführt, wenn ein gültiges Schema hinterlegt ist.
Die Serverseitige Validierung wird immer durchgeführt wenn validationUrl konfiguriert wurde.
Validierungsergebnisse im state
Die Ergebnisse der Validierung werden im state festgehalten.
Dadurch ist es möglich Komponenten an diese Ergebnisse zu binden.
So kann man z.B. bestimmte Komponenten ausblenden so lange das Formular nicht validiert ist.
Es werden dafür drei Werte im state vorgehalten.
{
"state": [
{
"valid": true, (1)
"validationOk" : {
"server": true, (2)
"client": true (3)
},
"validationErrors": {
"server": [], (4)
"client": [] (5)
}
}
]
}| 1 | Zeigt an, ob es Validierungsfehler gibt.
Hier wird nicht zwischen Server und Client unterschieden.
Binding per /valid bzw. /!valid |
| 2 | Zeigt an, ob vom Server Validierungsfehler gemeldet wurden.
Binding per /validationOk.server bzw. /!validationOk.server |
| 3 | Zeigt an, ob vom Client Validierungsfehler gemeldet wurden.
Binding per /validationOk.client bzw. /!validationOk.client |
| 4 | Enthält alle aktuellen Validierungsfehler vom Server. |
| 5 | Enthält alle aktuellen Validierungsfehler vom Client. |
|
Wurde noch keine Validierung angestoßen, so gilt das Formular als valide und die entsprechenden Werte im |
