Personnaliser les messages d’erreur pour les formulaires HTML5

Dans les formulaires HTML5, les messages d’erreur et les avertissements ont une position et un aspect fixes (police et couleur), l’erreur s’affiche uniquement pour un champ sélectionné et une seule erreur s’affiche.

L’article décrit les étapes de personnalisation des messages d’erreur de HTML5 forms afin que vous puissiez effectuer les opérations suivantes :

• changer l’aspect et la position des messages d’erreur. Vous pouvez faire qu’une erreur apparaisse en haut, en bas, et sur le côté droit de chaque champ.
• afficher les messages d’erreur pour plusieurs champs à tout moment spécifié.
• afficher l'erreur, qu'un 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-SNAPSHOT.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 le message d’erreur.

Obtenir le fichier

Personnalisation de la position des messages d’erreur 

Pour personnaliser la position du message d’erreur, ajoutez une <div> pour chaque champ d’erreur et d’avertissement, positionnez la balise <div> sur la gauche ou la droite, et appliquez des styles CSS à l’événement <div> balise . Pour obtenir des instructions détaillées, reportez-vous à 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 pour le modifier. La fonction markError du fichier accepte les paramètres suivants :

   jqWidget	jqWidget est la poignée d’un 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 prête à l’emploi, les messages d’erreur s’affichent à 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 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 - msgHeight + "px";  // Assign the desired top position using pos.top. Here it is calculated for top of the field
               if (type != "warning") {
                   if(!jqWidget.errorDiv){
                                                                                   //Adding the warning div if it is not present already
                       jqWidget.errorDiv=$("<div id='customError'></div>").appendTo('body');
                   }
                   jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the warning div
                   jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
               } else {
                   if(!jqWidget.errorDiv){
                                                                                   //Adding the error div if it is not present already
                       jqWidget.errorDiv=$("<div id='customWarning'></div>").appendTo('body');
                   }
                   jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the error div
                   jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
               }
   
           },
   

4. Enregistrez et fermez le fichier.

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 modules pour télécharger et installer le module.

Affichage des messages d’erreur pour plusieurs champs 

Utilisez le package 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 id : #customError, #customWarning. Vous pouvez utiliser ces identifiants pour modifier diverses propriétés, telles que la couleur et la taille de police.

   Utilisez le code suivant pour modifier la taille et la couleur de la police 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 et fermez le fichier.

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 modules pour télécharger et installer le module.

Rendre le formulaire avec le nouveau profil. 

Les formulaires HTML5 prêts à l’emploi utilisent un profil par défaut : https://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location>&template=<name of the xdp>

Pour afficher un formulaire avec les messages d’erreur personnalisés, effectuez le rendu du formulaire avec le profil d’erreur : https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<name of the xdp>