Verwenden der erforderlichen Eingabevalidierung

Hintergrundinformationen

Sie können die erforderliche Eingabevalidierung verwenden, um den Benutzer während der Laufzeit darüber zu benachrichtigen, dass die Eingabe an ein Steuerelement obligatorisch ist, indem Sie die Eigenschaft Erforderlich auf =true festlegen. Sie können auch eine Fehlermeldung einrichten, wenn das Steuerelement zur Laufzeit nicht ausgefüllt wird, indem Sie die Eigenschaft Erforderliche Fehlermeldung verwenden.

Sie können mit der neuen Eigenschaft Beschriftung Text neben dem Steuerelement hinzufügen. Sie können die Beschriftung entweder über oder links neben dem Steuerelement platzieren, indem Sie die Eigenschaft Beschriftungsplatzierung auf der Registerkarte Stil verwenden.

Diese Eigenschaft ist derzeit für die folgenden Eingabesteuerelemente verfügbar:

• Datumsauswahl
• Dropdownmenü
• Dateiauswahl
• Dropdownmenü mit Mehrfachauswahl
• Optionsfeld
• Slider
• Textbereich
• Textfeld

In der folgenden Übung erstellen wir ein einfaches Formular mit der erforderlichen Eingabevalidierung. Mit dieser Übung können Sie besser verstehen, wie die erforderliche Eingabevalidierung funktioniert, und erfahren, wie Sie sie effizient in Ihren Anwendungen einsetzen können.

Erstellen eines Formulars mithilfe der erforderlichen Eingabevalidierung

Schritte

1. Öffnen Sie Ihre bereits vorhandene Anwendung oder starten Sie eine neue Anwendung.

2. Fügen Sie Ihrer App ein Schaltflächensteuerelement hinzu.

   • Fügen Sie Subscribe in der Text-Eigenschaft hinzu.
     
     

     

     
     

3. Fügen Sie Ihrer App eine neue leere Seite hinzu.

   • Benennen Sie die Seite in Abonnement-Seite um.

4. Fügen Sie ein Header-Anzeigesteuerelement oben auf der Seite hinzu.

   • Fügen Sie Subscribe to this app in der Text-Eigenschaft hinzu.

5. Fügen Sie ein Textfeldsteuerelement unterhalb des Headers hinzu.

   • Benennen Sie es in Name um.
   • Fügen Sie Name: in der Eigenschaft Beschreibung hinzu.
   • Legen Sie die Eigenschaft Erforderlich von der Validierung auf =true fest.

6. Fügen Sie ein Textfeldsteuerelement unterhalb des Textfelds Name hinzu.

   • Benennen Sie es in Email um.
   • Fügen Sie Email: in der Eigenschaft Beschreibung hinzu.
   • Legen Sie die Eigenschaft Erforderlich von der Validierung auf =true fest.

Fügen Sie ein Datumsauswahl-Steuerelement unterhalb des letzten Textfelds hinzu.

• Benennen Sie es in Date of birth um.
• Fügen Sie Date of birth: in der Eigenschaft Beschreibung hinzu.

Legen Sie die Eigenschaft Erforderlich von der Validierung auf =true fest.

Hinweis:

Jedes dieser Steuerelemente verfügt über eine Eigenschaft isValid. Diese Eigenschaft gibt an, ob ein Steuerelement gültig ist oder nicht.

Wenn die Eigenschaft Required eines Steuerelements auf =true festgelegt ist, dann ist das Steuerelement standardmäßig nicht gültig.

1. Fügen Sie ein Schaltflächensteuerelement unter der Datumsauswahl hinzu.

   • Fügen Sie Submit in der Text-Eigenschaft hinzu.
   • Verwenden Sie in der Eigenschaft Deaktiviert die Eigenschaft isValid aus den zuvor konfigurierten Steuerelementen, um den folgenden Ausdruck zu erstellen: =! Name.isValid || !Email.isValid || !Date of birth.isValid.
     
     

     

     
     

2. Wechseln Sie von der Hauptseite zur Schaltfläche Abonnieren und konfigurieren Sie das Ereignis Angeklickt.

   • Fügen Sie eine Regel Eine Seite öffnen hinzu.
   • Fügen Sie die Seite „Abonnieren“ in das Feld Welche Seite soll geöffnet werden? ein.

   • Markieren Sie das Kontrollkästchen Als Popover (Modal) anzeigen.

     
     

     

     
     

Verfahrensergebnisse

Nachdem Sie alle obigen Schritte ausgeführt haben, können Sie eine Vorschau Ihrer App anzeigen.

Wenn Sie im Vorschaumodus auf die Schaltfläche Abonnieren klicken, wird die Seite „Abonnieren“ geöffnet. Beachten Sie, dass die Schaltfläche Übermitteln deaktiviert ist und erst aktiviert wird, wenn alle erforderlichen Felder ausgefüllt sind.

Hinweis:

Wenn Sie einen Wert in ein beliebiges Feld eingeben und dann entfernen, wird eine Fehlermeldung angezeigt und die Schaltfläche wird erneut deaktiviert.