Felder als Reaktion auf Benutzeraktionen hervorheben

Dieses Beispiel zeigt, wie Sie das aktuelle Feld hervorheben, das ein Formularbenutzer gerade bearbeitet, wie Sie die Felder hervorheben, die Formularbenutzer ausfüllen müssen, und wie Sie den Formularbenutzern Feedback in Form von Meldungsfeldern geben können.

In diesem Beispiel erscheint rechts neben den erforderlichen Feldern ein Sternchen (*). Bei Auswahl eines Felds wird dem Feldrand die Farbe Blau zugewiesen. Wenn ein Formularbenutzer auf die Schaltfläche "Daten überprüfen" klickt, aber nicht alle erforderlichen Felder ausgefüllt hat, wird eine Meldung angezeigt und das entsprechende Feld rot markiert. Wenn alle erforderlichen Felder ausgefüllt wurden und der Formularbenutzer auf die Schaltfläche "Daten überprüfen" klickt, wird eine Bestätigungsmeldung eingeblendet.

Zum Anzeigen dieser Beispieldatei und anderer rufen Sie das Developer Center auf.

Skripten zum Kennzeichnen eines ausgewählten Feldes mit einem blauen Rand

Zum Kennzeichnen des ausgewählten Feldes durch einen blauen Rand fügen Sie allen Textfeldern die folgenden Skripten hinzu:

Fügen Sie dem Feld „Name“ beispielsweise ein enter -Ereignis hinzu:

Name.border.edge.color.value = "0,0,255";

Fügen Sie dem Feld „Name“ beispielsweise ein exit -Ereignis hinzu:

Name.border.edge.color.value = "255,255,255";

Fügen Sie dem Feld „Name“ beispielsweise ein mouseEnter -Ereignis hinzu:

Name.border.edge.color.value = "0,0,255";

Fügen Sie dem Feld „Name“ beispielsweise ein mouseEnter -Ereignis hinzu:

Name.border.edge.color.value = "255,255,255";

Skripten für die Schaltfläche "Daten überprüfen"

Das folgende Skript, das speziell für die Schaltfläche "Daten überprüfen" konzipiert wurde, stellt anhand einiger Überprüfungsschritte fest, ob die erforderlichen Felder Daten enthalten. Dabei wird jedes Feld einzeln überprüft und festgestellt, ob der Feldwert nicht null oder eine leere Zeichenfolge ist. Ist der Feldwert null oder eine leere Zeichenfolge, wird ein Hinweis eingeblendet, welcher den Benutzer daran erinnert, dass dieses Feld ausgefüllt werden muss. Gleichzeitig wird die Hintergrundfarbe des Füllbereichs in Rot geändert.

Verwenden Sie diese Variable, um anzugeben, ob ein Feld keine Daten enthält:

    var iVar = 0; 
 
    if ((Name.rawValue == null) || (Name.rawValue == "")) { 
        xfa.host.messageBox("Please enter a value in the Name field.");

Dieses Skript ändert die Farbe des Füllbereichs des Textfelds:

        xfa.resolveNode("Name.ui.#textEdit.border.edge").stroke = "solid"; 
        xfa.resolveNode("Name.ui.#textEdit.border.fill.color").value = "255,100,50"; 
 
        // Set the variable to indicate that this field does not contain data.     
        iVar = 1; 
    } 
    else { 
        // Reset the fillable area of the text field. 
        xfa.resolveNode("Name.ui.#textEdit.border.edge").stroke = "lowered"; 
        xfa.resolveNode("Name.ui.#textEdit.border.fill.color").value = "255,255,255"; 
    } 
 
    if ((Address.rawValue == null) || (Address.rawValue == "")) { 
        xfa.host.messageBox("Please enter a value in the Address field.");

Dieses Skript ändert die Farbe des Füllbereichs des Textfelds:

        xfa.resolveNode("Address.ui.#textEdit.border.edge").stroke = "solid"; 
        xfa.resolveNode("Address.ui.#textEdit.border.fill.color").value = "255,100,50";

Dieses Skript stellt die Variable ein, die angibt, dass dieses Feld keine Daten enthält:

        iVar = 1; 
    } 
    else {

Dieses Skript setzt den Füllbereich des Textfelds zurück:

        xfa.resolveNode("Address.ui.#textEdit.border.edge").stroke = "lowered"; 
        xfa.resolveNode("Address.ui.#textEdit.border.fill.color").value = "255,255,255"; 
    } 
 
    if ((City.rawValue == null) || (City.rawValue == "")) { 
        xfa.host.messageBox("Please enter a value in the City field.");

Dieses Skript ändert die Farbe des Füllbereichs des Textfelds:

        xfa.resolveNode("City.ui.#textEdit.border.edge").stroke = "solid"; 
        xfa.resolveNode("City.ui.#textEdit.border.fill.color").value = "255,100,50";

Dieses Skript stellt die Variable ein, die angibt, dass dieses Feld keine Daten enthält:

        iVar = 1; 
    } 
    else {

Dieses Skript setzt den Füllbereich des Textfelds zurück:

        xfa.resolveNode("City.ui.#textEdit.border.edge").stroke = "lowered"; 
        xfa.resolveNode("City.ui.#textEdit.border.fill.color").value = "255,255,255"; 
    } 
 
    if ((State.rawValue == null) || (State.rawValue == "")) { 
        xfa.host.messageBox("Please enter a value in the State field.");

Dieses Skript ändert die Farbe des Füllbereichs des Textfelds:

        xfa.resolveNode("State.ui.#textEdit.border.edge").stroke = "solid"; 
        xfa.resolveNode("State.ui.#textEdit.border.fill.color").value = "255,100,50";

Dieses Skript stellt die Variable ein, die angibt, dass dieses Feld keine Daten enthält:

        iVar = 1; 
    } 
    else {

Dieses Skript setzt den Füllbereich des Textfelds zurück:

        xfa.resolveNode("State.ui.#textEdit.border.edge").stroke = "lowered"; 
        xfa.resolveNode("State.ui.#textEdit.border.fill.color").value = "255,255,255"; 
    } 
 
    if ((ZipCode.rawValue == null) || (ZipCode.rawValue == "")) { 
        xfa.host.messageBox("Please enter a value in the Zip Code field.");

Dieses Skript ändert die Farbe des Füllbereichs des Textfelds:

        xfa.resolveNode("ZipCode.ui.#textEdit.border.edge").stroke = "solid"; 
        xfa.resolveNode("ZipCode.ui.#textEdit.border.fill.color").value = "255,100,50";

Dieses Skript stellt die Variable ein, die angibt, dass dieses Feld keine Daten enthält:

        iVar = 1; 
    } 
    else {

Dieses Skript setzt den Füllbereich des Textfelds zurück:

        xfa.resolveNode("ZipCode.ui.#textEdit.border.edge").stroke = "lowered"; 
        xfa.resolveNode("ZipCode.ui.#textEdit.border.fill.color").value = "255,255,255"; 
    } 
 
    if ((Country.rawValue == null) || (Country.rawValue == "")) { 
        xfa.host.messageBox("Please enter a value in the Country field.");

Dieses Skript ändert die Farbe des Füllbereichs des Textfelds:

        xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "solid"; 
        xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,100,50";

Dieses Skript stellt die Variable ein, die angibt, dass dieses Feld keine Daten enthält.

        iVar = 1; 
    } 
    else {

Dieses Skript setzt den Füllbereich des Textfelds zurück:

        xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "lowered"; 
        xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,255,255"; 
    }

Wenn alle erforderlichen Felder Daten enthalten, wird die Variable iVar auf 0 gesetzt und eine Bestätigungsmeldung angezeigt:

        if (iVar == 0) { 
            xfa.host.messageBox("Thank you for inputting your information."); 
        }