Dans les formulaires au format HTML5, hors de la zone, les messages d'erreur et les avertissements ont une position et un aspect fixes (police et couleur). L'erreur s'affiche uniquement pour le champ actif.

Vous pouvez personnaliser les messages d'erreur des formulaires au format HTML5 pour 

  • en modifier l'aspect et la position. Vous pouvez faire qu'une erreur apparaisse en haut, en bas, et sur le côté droit de chaque champ. 
  • afficher des messages d'erreur pour d'autres champs en simultané avec le message d'erreur pour le champ actif.
  • afficher le message d'erreur, que le champ soit sélectionné ou non. 

Personnalisation des messages d'erreur 

Avant de personnaliser les messages d'erreur, téléchargez et extrayez le package ci-joint (CustomErrorManager-1.0.zip).

Après avoir extrait le package, ouvrez le dossier CustomErrorManager-1.0-SNAPSHOT. Il contient les dossiers jcr_root et META-INF. Ces dossiers contiennent les fichiers CSS et .JS requis pour personnaliser les messages d'erreur.

Telechargement

Personnalisation de la position des messages d'erreur 

Pour personnaliser la position d'un message d'erreur, ajoutez une balise

à chaque champ d'erreur et d'avertissement, positionnez la balise
à gauche ou à droite, puis appliquez les styles CSS à la balise
. Pour obtenir des instructions détaillées, consultez la procédure ci-dessous :

  1. Accédez au dossier CustomErrorManager-1.0-SNAPSHOT et ouvrez le dossier etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript.

  2. Ouvrez le fichier customErrorManager.js en mode d’édition. Dans ce fichier, la fonction markError accepte les paramètres suivants : 

      
    jqWidget jqWidget est la poignée du widget.
    msg  contient le message d'erreur
    type  indique s'il s'agit d'une erreur ou d'un avertissement
  3. Sur l'implémentation hors de la zone, les messages d'erreur apparaissent à droite du champ. Pour que les messages d'erreur apparaissent au-dessus, utilisez le code suivant.

                    markError: function (jqWidget, msg, type) {
                    var element = jqWidget.element,                                                                                                              //Gives the div containing the widget
                    pos = $(element).offset(),                                                                                                                         //Calculates the position of the div in the view port
                    msgHeight = xfalib.view.util.TextMetrics.measureExtent(msg).height + 5;                                                //Calculating the height of the Error Message
                    styles = {};
                    styles.left = pos.left  + "px";                                                                                                                     // Assign the desired left position using pos.left. Here it is calculated for exact left of the field
                    styles.top = pos.top * (1 / xfalib.ut.XfaUtil.prototype.formScaleFactor) - msgHeight + "px";                      // Assign the desired top position using pos.top. Here it is calculated for top of the field
                    if (type != "warning") {
                    if(!jqWidget.ref){
                    jqWidget.ref=$("<div id='customError'></div>").appendTo('body');                                                          //Adding the warning div if it is not present already
                    }
                    jqWidget.$css(jqWidget.ref.get(0), styles);                                                                                               // Applying the styles to the warning div
                    jqWidget.ref.text(msg).show();                                                                                                                  //Showing the warning message  
                    } else {
                    if(!jqWidget.ref){                                                                                                                                        //Adding the error  div if it is not present already
                    jqWidget.ref=$("<div id='customWarning'></div>").appendTo('body');
                    }
                    jqWidget.$css(jqWidget.ref.get(0), styles);                                                                                                  // Applying the styles to the error div
                    jqWidget.ref.text(msg).show();                                                                                                                     //Showing the warning message  
                    }
                    },
  4. Enregistrez le fichier, puis fermez-le.

  5. Accédez au dossier CustomErrorManager-1.0-SNAPSHOT et créez une archive des dossiers jcr_root et META-INF. Renommez l'archive en CustomErrorManager-1.0-SNAPSHOT.zip.

     

  6. Utilisez le gestionnaire de packages pour télécharger et installer le package.  

Affichage des messages d'erreur pour plusieurs champs 

Utilisez le package ci-joint pour afficher simultanément les messages d'erreur pour tous les champs. Pour afficher un seul message d'erreur, utilisez le profil par défaut.

Personnalisation de l'aspect des messages d'erreur. 

  1. Accédez au dossier etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css.

  2. Ouvrez le fichier sample.css en mode d'édition. Le fichier CSS contient 2 identifiants, #customError, #customWarning. Vous pouvez utiliser ces identifiants pour modifier diverses propriétés telles que la couleur, la taille de police, etc.
    Utilisez le code suivant pour modifier la taille de police et la couleur des messages d'erreur ou d'avertissement.

    #customError {
    color: #0000FF; // it changes the color of Error Message
    display:none;
    position:absolute;
    opacity:0.85;
    font-size: 24px;  // it changes the font size of Error Message
    z-index:5;
    }
    
    #customWarning {
    color: #00FF00;  // it changes the color of Warning Message
    display:none;
    position:absolute;
    opacity:0.85;
    font-size: 18px;   // it changes the font size of Warning Message
    z-index:5;
    }
    
    Save the changes.
  3. Enregistrez le fichier, puis fermez-le.

  4. Accédez au dossier CustomErrorManager-1.0-SNAPSHOT et créez une archive des dossiers jcr_root et META-INF. Renommez l'archive en CustomErrorManager-1.0-SNAPSHOT.zip.

     

  5. Utilisez le gestionnaire de packages pour télécharger et installer le package.

Rendre le formulaire avec le nouveau profil. 

Hors zone, les formulaires HTML5 utilisent un profil par défaut : http:///content/xfaforms/profiles/default.html?contentRoot=&template=

Pour afficher un formulaire avec des messages d'erreur personnalisé, générez le rendu du formulaire avec le profil d'erreur : http:///content/xfaforms/profiles/error.html?contentRoot=&template=

Remarque :

Le package ci-joint installe le profil d'erreur. 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne