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