Du visar hjälpinnehåll för version:
- 6.4
- 6.3
- 6.2
- Äldre versioner
In HTML5 forms, out of the box, the error messages and warnings have a fixed position and appearance (font and color), the error is displayed only for a selected field, and only one error is displayed.
The article provides the steps to customize HTML5 forms error messages to,
- change the appearance and position of error messages. You can make an error to appear at the top, bottom, and right of any field.
- display error messages for multiple fields at any given moment.
- display the error irrespective of a field is selected or not.
Before customizing the error messages, download and extract the attached package (CustomErrorManager-1.0-SNAPSHOT.zip).
Hämta
To customize the position of error message, add <div> tag for each error and warning field, postion the <div> tag on the left or right, and apply css styles on the <div> tag. For detailed steps, see the procedure listed below:
-
On the out of the box implementation, error messages appears on the right of the field. To make the error messages appear on the top use the following code.
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 } },
Ue the attached package to simultaneously display error messages for all the fields. To display a single error message, use default profile.
-
Open the file sample.css for editing.The css file contains 2 ids- #customError, #customWarning. You can use these ids to change various properties such as color, font size etc.
Use the following code to change font size and color of error/warning messages.
#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.
Out of the box, html5 forms use a default profile: http://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location>&template=<name of the xdp>
To view a form with the custom error messages, render the form with error profile: http://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<name of the xdp>
Obs!
The attached package installs the error profile.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.