Foutberichten voor HTML5-formulieren aanpassen
- Onderwerpen:
- Mobile Forms
Gemaakt voor:
- User
In HTML5-formulieren hebben foutberichten en -waarschuwingen een vaste positie en weergave (font en color), maar wordt de fout alleen voor een geselecteerd veld weergegeven. Er wordt slechts één fout weergegeven.
Het artikel bevat de stappen waarmee u foutberichten voor HTML5-formulieren kunt aanpassen aan
- de weergave en positie van foutberichten wijzigen. U kunt een fout maken die boven, onder en rechts van een veld wordt weergegeven.
- foutberichten weergeven voor meerdere velden op een bepaald moment.
- geeft de fout weer ongeacht of een veld is geselecteerd of niet.
Foutberichten aanpassen
Download en extraheer het bijgevoegde pakket (CustomErrorManager-1.0-SNAPSHOT.zip) voordat u de foutberichten aanpast.
Nadat u het pakket hebt uitgepakt, opent u de map CustomErrorManager-1.0-SNAPSHOT. Het bevat de mappen jcr_root en META-INF. Deze mappen bevatten de CSS- en JS-bestanden die nodig zijn om het foutbericht aan te passen.
De positie van foutberichten aanpassen
Als u de positie van het foutbericht wilt aanpassen, voegt u <div> -tag voor elk fout- en waarschuwingsveld plaatsen op <div> links of rechts labelen en CSS-stijlen toepassen op de <div> tag. Voor gedetailleerde stappen, zie de hieronder vermelde procedure:
-
Ga naar de
CustomErrorManager-1.0-SNAPSHOT
en opent u deetc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript
map. -
Open de
customErrorManager.js
bestand voor bewerking. DemarkError
-functie in het bestand accepteert de volgende parameters:jqWidgetjqWidget is de greep voor widget.msgbevat het foutberichttypegeeft aan of het een fout of een waarschuwing betreft -
Bij de implementatie buiten het vak worden aan de rechterkant van het veld foutberichten weergegeven. Gebruik de volgende code om de foutberichten bovenaan weer te geven.
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 } },
-
Sla het bestand op en sluit het.
-
Ga naar de
CustomErrorManager-1.0-SNAPSHOT
en maak een archief van de mappen jcr_root en META-INF. Wijzig de naam van het archief in CustomErrorManager-1.0-SNAPSHOT.zip. -
Gebruik pakketbeheer om het pakket te uploaden en te installeren.
Foutberichten weergeven voor meerdere velden
Gebruik het bijgevoegde pakket om foutberichten voor alle velden tegelijk weer te geven. Gebruik het standaardprofiel als u één foutbericht wilt weergeven.
De weergave van foutberichten aanpassen.
-
Ga naar etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css folder.
-
Open het bestand sample.css voor bewerking.Het CSS-bestand bevat 2 id's- #customError, #customWarning. U kunt deze id's gebruiken om verschillende eigenschappen te wijzigen, zoals kleur, tekengrootte, enz.
Gebruik de volgende code om de tekengrootte en kleur van fout-/waarschuwingsberichten te wijzigen.
#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.
-
Sla het bestand op en sluit het.
-
Navigeer naar de map CustomErrorManager-1.0-SNAPSHOT en maak een archief van de mappen jcr_root en META-INF. Wijzig de naam van het archief in CustomErrorManager-1.0-SNAPSHOT.zip.
-
Gebruik pakketbeheer om het pakket te uploaden en te installeren.
Het formulier weergeven met het nieuwe profiel.
HTML5-formulieren gebruiken een standaardprofiel uit het vak: https://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location="">&template=<name of="" the="" xdp="">
Als u een formulier wilt weergeven met de aangepaste foutberichten, geeft u het formulier weer met het foutprofiel: https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location="">&template=<name of="" the="" xdp="">