> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Regeln zu Ihren Formularfeldern hinzufügen

> Legen Sie Pflichtfelder und Validierungsregeln für Formulareingaben fest, um sicherzustellen, dass Besucher Daten im korrekten Format übermitteln, bevor das Formular gesendet wird.

Sie können Regeln für ein Element festlegen. Regeln stellen sicher, dass Sie die korrekten Formulardaten im richtigen Format erfassen.

## Option Required

Sie können in Ihren Formular-Widgets Pflichtfelder einrichten. Wenn der Besucher die Information nicht ausgefüllt hat, ist das Feld ungültig.

Wenn Benutzer keine Informationen in ein Pflichtfeld eingeben:

* Ihr Element wechselt in den Zustand **invalid**.
* Wenn Sie Ihrem Formular ein **FormErrorMessage**-Element hinzugefügt haben, wird dieses Element sichtbar.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-forms/add-rules-to-your-form-fields/0.png)
</Frame>

Alle Elementtypen, die zur Kategorie **Form** gehören, können als Pflichtfelder gekennzeichnet werden. Wenn das Element ein Toggle ist, muss der Besucher es auf ON stellen. Wenn das Element ein Kontrollkästchen ist, muss der Benutzer es aktivieren. Wenn das Element ein Eingabefeld ist, kann der Benutzer es nicht leer lassen.

### Beispielanwendungsfall

Angenommen, Sie möchten alle Elemente als Pflichtfelder festlegen: die E-Mail-Adresseingabe, zwei Dropdown-Listen zur Auswahl einer Newsletter-Kategorie und einen Toggle zur Annahme der Allgemeinen Geschäftsbedingungen.

Wählen Sie jedes dieser Elemente aus und schalten Sie den **Required**-Toggle auf ON.

## Validierungsregeln

### Validierungsregeln, die beim Absenden des Formulars ausgelöst werden

<Note>
  Im Folgenden gehen wir von der folgenden Voraussetzung aus: Sie haben ein Ereignis erstellt, das definiert, was passiert, wenn ein Besucher auf die Schaltfläche „Submit" klickt, und die zugehörige Aktion sendet eine HTTP-Anfrage.
</Note>

Sie können Validierungsregeln festlegen, um zu prüfen, ob Felder vor dem Absenden gültig sind. Validierungsregeln betreffen nur die Elemente **Input** und **Textarea**.

Wenn beispielsweise eine Texteingabe Informationen im falschen Format enthält, kann das Formular nicht gesendet werden. Sie können eine Fehlermeldung einrichten, um den Besucher aufzufordern, seine Eingabe zu korrigieren.

Sie können eine der folgenden Optionen festlegen:

* not empty
* only alphanumeric
* number
* email
* URL
* Text
* Length
* Regular expression

Standardmäßig erfolgt die Validierung nur, wenn ein Besucher auf die Schaltfläche „Submit" klickt.

Sie können jedoch ein Ereignis erstellen, um das Feld zu überprüfen, wenn ein Besucher die Interaktion damit beendet.

#### FormErrorMessage

Das Element **FormErrorMessage** zeigt eine Meldung an, wenn ein Fehler bei der Validierung gemeldet wird.

Um eine bestimmte Fehlermeldung für ein Element in Ihrem Formular anzuzeigen, müssen Sie ein **Text**-Element verwenden und es mit einem Ereignis verknüpfen.

### Hinzufügen von Ereignissen zur Überprüfung der Gültigkeit Ihrer Felder beim Verlust des Fokus

Sie können Validierungsregeln festlegen, um zu überprüfen, ob Felder beim Verlust des Fokus gültig sind. Validierungsregeln betreffen nur die Elemente **Input** und **Textarea**.

Wenn beispielsweise eine Texteingabe Informationen im falschen Format enthält, kann dem Besucher eine Fehlermeldung gesendet werden, um ihn aufzufordern, seine Eingabe zu korrigieren.

So richten Sie diese Validierungsregel ein:

1. Navigieren Sie zu den **Input settings** eines Elements.
2. Wählen Sie eine **Validation rule** aus der Liste aus.
3. Fügen Sie ein **Text**-Element mit der Fehlermeldung hinzu.
4. Platzieren Sie die Fehlermeldung neben dem entsprechenden Eingabefeld.
5. Blenden Sie die Fehlermeldung aus, sodass sie nur erscheint, wenn der Wert der Eingabe im falschen Format vorliegt.
6. Navigieren Sie zum Bereich **Events** des Widget Studio.
7. Fügen Sie ein **Form**-Ereignis hinzu.
8. Klicken Sie auf **By element form value**.
9. Wählen Sie im Dropdown-Menü eine **Validation rule** aus.
10. Klicken Sie auf **Add action**.
11. Wählen Sie **Show element** und wählen Sie Ihr Textelement aus.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields/Capture-decran-2023-02-17-a-09.56.51.png)
</Frame>

Beim Verlust des Fokus wird der Wert des Elements überprüft, und wenn er nicht Ihrer Validierungsregel entspricht, erscheint die Fehlermeldung im Widget.

<Note>
  Sie können auch ein bestimmtes Ereignis hinzufügen, um sicherzustellen, dass die Fehlermeldung nicht standardmäßig in Ihrem Widget angezeigt wird, sondern nur, wenn beim Verlust des Fokus ein Fehler erkannt wird.
</Note>

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields/Capture-decran-2023-02-17-a-12.22.36.png)
</Frame>
