Este ejemplo muestra cómo resaltar el campo actual con el que está trabajando la persona que rellena el formulario, cómo resaltar los campos que la persona que rellena el formulario debe rellenar y cómo utilizar los cuadros de mensaje para mostrar información a la persona que rellena el formulario.
En este ejemplo, aparece un asterisco (*) a la derecha de los campos obligatorios. Al seleccionar un campo, su borde cambia a color azul. Si la persona que rellena el formulario hace clic en el botón Verificar datos sin haber rellenado los campos obligatorios, aparecerá un mensaje y el campo cambiará a color rojo. Si se han rellenado todos los campos obligatorios, aparecerá un mensaje de confirmación cuando la persona que rellena el formulario haga clic en el botón Verificar datos.
Secuencia de comandos para agregar un borde azul alrededor de un campo seleccionado
Para agregar el borde azul alrededor del campo seleccionado, agregue las siguientes secuencias de comandos a cada campo de texto:
Por ejemplo, agregue un suceso enter al campo Nombre:
Name.border.edge.color.value = "0,0,255";
Por ejemplo, agregue un suceso exit al campo Nombre:
Name.border.edge.color.value = "255,255,255";
Por ejemplo, agregue un suceso mouseEnter al campo Nombre:
Name.border.edge.color.value = "0,0,255";
Por ejemplo, agregue un suceso mouseExit al campo Nombre:
Name.border.edge.color.value = "255,255,255";
Secuencia de comandos para el botón Verificar datos
La siguiente secuencia de comandos, creada para el botón Verificar datos, lleva a cabo una serie de comprobaciones para verificar que todos los campos obligatorios contienen datos. En este caso, cada campo se comprueba por separado para verificar que su valor no es nulo ni una cadena vacía. Si el valor del campo fuera nulo o una cadena vacía, aparecería un mensaje de alerta indicando que es preciso introducir datos en el campo y el color de fondo del área rellenable cambiaría a rojo.
Utilice esta variable para indicar si el campo no contiene datos:
var iVar = 0;
if ((Name.rawValue == null) || (Name.rawValue == "")) {
xfa.host.messageBox("Please enter a value in the Name field.");
Esta secuencia de comandos cambia el color del área rellenable del campo de texto:
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.");
Esta secuencia de comandos cambia el color del área rellenable del campo de texto:
xfa.resolveNode("Address.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("Address.ui.#textEdit.border.fill.color").value = "255,100,50";
Esta secuencia de comandos define la variable para indicar que el campo no contiene datos:
iVar = 1;
}
else {
Esta secuencia de comandos restablece el área rellenable del campo de texto:
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.");
Esta secuencia de comandos cambia el color del área rellenable del campo de texto:
xfa.resolveNode("City.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("City.ui.#textEdit.border.fill.color").value = "255,100,50";
Esta secuencia de comandos define la variable para indicar que el campo no contiene datos:
iVar = 1;
}
else {
Esta secuencia de comandos restablece el área rellenable del campo de texto:
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.");
Esta secuencia de comandos cambia el color del área rellenable del campo de texto:
xfa.resolveNode("State.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("State.ui.#textEdit.border.fill.color").value = "255,100,50";
Esta secuencia de comandos define la variable para indicar que el campo no contiene datos:
iVar = 1;
}
else {
Esta secuencia de comandos restablece el área rellenable del campo de texto:
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.");
Esta secuencia de comandos cambia el color del área rellenable del campo de texto:
xfa.resolveNode("ZipCode.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("ZipCode.ui.#textEdit.border.fill.color").value = "255,100,50";
Esta secuencia de comandos define la variable para indicar que el campo no contiene datos:
iVar = 1;
}
else {
Esta secuencia de comandos restablece el área rellenable del campo de texto:
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.");
Esta secuencia de comandos cambia el color del área rellenable del campo de texto:
xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,100,50";
Esta secuencia de comandos define la variable para indicar que el campo no contiene datos.
iVar = 1;
}
else {
Esta secuencia de comandos restablece el área rellenable del campo de texto.
xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "lowered";
xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,255,255";
}
Si todos los campos obligatorios contienen datos, la variable iVar se fija en cero y aparece un mensaje de confirmación:
if (iVar == 0) {
xfa.host.messageBox("Thank you for inputting your information.");
}
