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

clientValidation.json

{
  "$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

Vorschau in separatem Fenster öffnen

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:

^[\\u0020-\\uD7FF\\u0009\\u000A\\u000D\\uE000-\\uFFFD\\u10000-\\u10FFFF]*$

{
    "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 validationErrors. Daher kann z.B. auch bei einem Submit - Formularversand mit Validierungsfehlern geantwortet werden.

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 state sind true.

Keywords: