Este exemplo demonstra como realçar o campo atual em que o usuário está trabalhando, realçar campos que devem ser preenchidos pelo usuário e usar as caixas de mensagem para fornecer um feedback ao usuário.
Nesse exemplo, aparece um asterisco (*) à direita dos campos obrigatórios. Quando um campo é selecionado, a borda do campo muda para a cor azul. Se o usuário clicar no botão Verificar dados sem ter preenchido os campos obrigatórios, aparecerá uma mensagem e o campo mudará para a cor vermelha. Se todos os campos obrigatórios estiverem preenchidos, aparecerá uma mensagem de confirmação quando o usuário clicar no botão Verificar dados.
Script para adicionar uma borda azul ao redor do campo selecionado
Para adicionar uma borda azul ao redor do campo selecionado, adicione os seguintes scripts a cada campo de texto:
Por exemplo, adicione um evento enter ao campo Nome:
Name.border.edge.color.value = "0,0,255";
Por exemplo, adicione um evento enter ao campo Nome:
Name.border.edge.color.value = "255,255,255";
Por exemplo, adicione um evento mouseEnter ao campo Nome:
Name.border.edge.color.value = "0,0,255";
Por exemplo, adicione um evento mouseExit ao campo Nome:
Name.border.edge.color.value = "255,255,255";
Script para o botão Verificar dados
O script a seguir, que é criado para o botão Verificar dados, executa uma série de verificações para saber se os campos obrigatórios contêm dados. Nesse caso, cada campo é verificado individualmente para saber se o valor do campo não é nulo ou se não é uma string vazia. Se o valor do campo for nulo ou uma string vazia, aparecerá uma mensagem de alerta indicando que os dados devem ser inseridos no campo e a cor de fundo da área de preenchimento mudará para a cor vermelha.
Use essa variável para indicar se o campo não contém dados:
var iVar = 0;
if ((Name.rawValue == null) || (Name.rawValue == "")) {
xfa.host.messageBox("Please enter a value in the Name field.");
Esse script muda a cor da área de preenchimento do 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.");
Esse script muda a cor da área de preenchimento do campo de texto:
xfa.resolveNode("Address.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("Address.ui.#textEdit.border.fill.color").value = "255,100,50";
O script a seguir define a variável para indicar se o campo não contém dados:
iVar = 1;
}
else {
Esse script redefine a cor da área de preenchimento do 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.");
Esse script muda a cor da área de preenchimento do campo de texto:
xfa.resolveNode("City.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("City.ui.#textEdit.border.fill.color").value = "255,100,50";
O script a seguir define a variável para indicar se o campo não contém dados:
iVar = 1;
}
else {
Esse script redefine a cor da área de preenchimento do 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.");
Esse script muda a cor da área de preenchimento do campo de texto:
xfa.resolveNode("State.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("State.ui.#textEdit.border.fill.color").value = "255,100,50";
O script a seguir define a variável para indicar se o campo não contém dados:
iVar = 1;
}
else {
Esse script redefine a cor da área de preenchimento do 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.");
Esse script muda a cor da área de preenchimento do campo de texto:
xfa.resolveNode("ZipCode.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("ZipCode.ui.#textEdit.border.fill.color").value = "255,100,50";
O script a seguir define a variável para indicar se o campo não contém dados:
iVar = 1;
}
else {
Esse script redefine a cor da área de preenchimento do 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.");
Esse script muda a cor da área de preenchimento do campo de texto:
xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "solid";
xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,100,50";
O script a seguir define a variável para indicar se o campo não contém dados.
iVar = 1;
}
else {
Esse script redefine a cor da área de preenchimento do campo de texto.
xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "lowered";
xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,255,255";
}
Se todos os campos obrigatórios contiverem dados, o valor da variável iVar será zero e a seguinte mensagem de confirmação aparecerá:
if (iVar == 0) {
xfa.host.messageBox("Thank you for inputting your information.");
}
