Mise en surbrillance des champs en réponse aux interactions de l’utilisateur final

Cet exemple vous montre comment mettre en surbrillance le champ actif avec lequel travaille un utilisateur, comment mettre en surbrillance les champs que doit remplir un utilisateur, et comment utiliser les zones de message pour envoyer des commentaires à l’utilisateur.

Dans cet exemple, un astérisque (*) apparaît à droite des champs obligatoires. Lorsqu’un champ est sélectionné, la bordure du champ devient bleue. Si l’utilisateur clique sur le bouton de vérification des données sans avoir rempli les champs obligatoires, un message s’affiche et le champ devient rouge. Si tous les champs obligatoires sont remplis, un message de confirmation s’affiche lorsque l’utilisateur clique sur le bouton de vérification des données.

Afficher le graphique en taille réelle

Pour afficher cet exemple de script et d’autres exemples, consultez le Centre des développeurs .

Script pour l’ajout d’une bordure bleue autour d’un champ sélectionné

Pour ajouter une bordure bleue au champ sélectionné, ajoutez les scripts suivants à chaque champ de texte :

Par exemple, ajoutez un événement enter au champ Nom :

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

Par exemple, ajoutez un événement exit au champ Nom :

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

Par exemple, ajoutez un événement mouseEnter au champ Nom :

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

Par exemple, ajoutez un événement mouseExit au champ Nom :

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

Script pour le bouton de vérification des données :

Le script suivant, créé pour le bouton de vérification des données, exécute une série de vérifications afin de confirmer que les champs obligatoires contiennent des données. Dans le cas présent, chaque champ est vérifié un à un afin de confirmer que la valeur du champ est non-nulle ou est une chaîne vide. Si la valeur du champ est nulle ou une chaîne vide, un message d’alerte s’affiche indiquant que des données doivent être entrées dans le champ et que la couleur d’arrière-plan de la zone remplissable est passée au rouge.

Utilisez cette variable pour indiquer si le champ ne contient aucune donnée :

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

Ce script modifie la couleur de la zone remplissable du champ de texte :

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

Ce script modifie la couleur de la zone remplissable du champ de texte :

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

Ce script définit la variable pour indiquer que ce champ ne contient aucune donnée :

        iVar = 1; 
    } 
    else {

Ce script réinitialise la zone remplissable du champ de texte :

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

Ce script modifie la couleur de la zone remplissable du champ de texte :

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

Ce script définit la variable pour indiquer que ce champ ne contient aucune donnée :

        iVar = 1; 
    } 
    else {

Ce script réinitialise la zone remplissable du champ de texte :

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

Ce script modifie la couleur de la zone remplissable du champ de texte :

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

Ce script définit la variable pour indiquer que ce champ ne contient aucune donnée :

        iVar = 1; 
    } 
    else {

Ce script réinitialise la zone remplissable du champ de texte :

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

Ce script modifie la couleur de la zone remplissable du champ de texte :

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

Ce script définit la variable pour indiquer que ce champ ne contient aucune donnée :

        iVar = 1; 
    } 
    else {

Ce script réinitialise la zone remplissable du champ de texte :

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

Ce script modifie la couleur de la zone remplissable du champ de texte :

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

Ce script définie la variable pour indiquer que ce champ ne contient aucune donnée.

        iVar = 1; 
    } 
    else {

Ce script réinitialise la zone remplissable du champ de texte.

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

Si tous les champs obligatoires contiennent des données, la variable iVar est définie à zéro et un message de confirmation s’affiche :

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