Highlighting fields in response to form filler interaction

This example demonstrates how to highlight the current field that a form filler is working with, highlight fields that a form filler is required to fill, and use message boxes to provide feedback to the form filler.

In this example, an asterisk (*) appears to the right of the required fields. When a field is selected, the field border changes to blue. If the form filler clicks the Verify Data button without having filled the required fields, a message appears and the field changes to red. If all the required fields are filled, a confirmation message appears when the form filler clicks the Verify Data button.

View full size graphic

To see this scripting example and others, visit tvisit the Developer Center .

Scripting for adding a blue border around a selected field

To add the blue border around the selected field, add the following scripts to each text field:

For example, add an enter event to the Name field:

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

For example, add an exit event to the Name field:

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

For example, add a mouseEnter event to the Name field:

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

For example, add a mouseExit event to the Name field:

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

Scripting for the Verify Data button

The following script, which is created for the Verify Data button, performs a series of checks to verify that the required fields contain data. In this case, each field is individually checked to verify that the value of the field is non-null or an empty string. If the value of the field is null or an empty string, an alert message appears indicating that data must be input into the field and the background color of the fillable area is changed to red.

Use this variable to indicate whether a field does not contain data:

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

This script changes the color of the fillable area of the text field:

        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.");

This script changes the color of the fillable area of the text field:

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

This script sets the variable to indicate that this field does not contain data:

        iVar = 1; 
    } 
    else {

This script resets the fillable area of the text field:

        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.");

This script changes the color of the fillable area of the text field:

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

This script sets the variable to indicate that this field does not contain data:

        iVar = 1; 
    } 
    else {

This script resets the fillable area of the text field:

        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.");

This script changes the color of the fillable area of the text field:

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

This script sets the variable to indicate that this field does not contain data:

        iVar = 1; 
    } 
    else {

This script resets the fillable area of the text field:

        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.");

This script changes the color of the fillable area of the text field:

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

This script sets the variable to indicate that this field does not contain data:

        iVar = 1; 
    } 
    else {

This script resets the fillable area of the text field:

        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.");

This script changes the color of the fillable area of the text field:

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

This script sets the variable to indicate that this field does not contain data.

        iVar = 1; 
    } 
    else {

This script resets the fillable area of the text field.

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

If all of the required fields contain data, the iVar variable is set to zero, and a confirmation message appears:

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

// Ethnio survey code removed