Vous consultez actuellement l'aide de la version:
- 6.4
- 6.3
- 6.2
- Anciennes versions
Dans les formulaires HTML5, hors de la zone, les messages d’erreur et les avertissements ont une position et un aspect fixes (police et couleur), l’erreur est affichée uniquement pour un champ sélectionné, et une seule erreur s’affiche.
L’article fournit les étapes de personnalisation des messages d’erreur des formulaires au format HTML5 pour
- 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, que le champ soit sélectionné ou non.
Avant de personnaliser les messages d’erreur, téléchargez et extrayez le package ci-joint (CustomErrorManager-1.0-SNAPSHOT.zip).
Telechargement
Pour personnaliser la position d’un message d’erreur, ajoutez une balise <div> à chaque champ d’erreur et d’avertissement, positionnez la balise <div> à gauche ou à droite, puis appliquez les styles CSS à la balise <div>. Pour obtenir des instructions détaillées, consultez la procédure ci-dessous :
-
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 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 } },
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.
-
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.
Hors zone, les formulaires HTML5 utilisent un profil par défaut : http://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location>&template=<name of the xdp>
Pour afficher un formulaire avec des messages d’erreur personnalisé, générez le rendu du formulaire avec le profil d’erreur : http://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<name of the xdp>
Remarque :
Le package ci-joint installe le profil d’erreur.