En los formularios de HTML5, de forma predeterminada, los mensajes de error y las advertencias tienen una posición y aspecto fijos (fuente y color), el error se muestra solo para un campo seleccionado y solo se muestra un error.
El artículo proporciona los pasos para personalizar los mensajes de error de formularios HTML5 a,
Antes de personalizar los mensajes de error, descargue y extraiga el paquete adjunto (CustomErrorManager-1.0-SNAPSHOT.zip).
Después de extraer el paquete, abra la carpeta CustomErrorManager-1.0-SNAPSHOT. Contiene carpetas jcr_root y META-INF. Estas carpetas contienen los archivos CSS y .JS necesarios para personalizar el mensaje de error.
Para personalizar la posición del mensaje de error, agregue <div> para cada campo de error y advertencia, coloque la variable <div> a la izquierda o a la derecha, y aplique estilos css en la <div> etiqueta. Para ver los pasos detallados, consulte el procedimiento que se muestra a continuación:
Vaya a la CustomErrorManager-1.0-SNAPSHOT
y abra la etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript
carpeta.
Abra el customErrorManager.js
para editar. La variable markError
en el archivo acepta los siguientes parámetros:
jqWidget | jqWidget es el identificador de la utilidad. |
msg | contiene el mensaje de error |
type | indica si es un error o una advertencia |
En la implementación predeterminada, aparecen mensajes de error a la derecha del campo . Para que los mensajes de error aparezcan en la parte superior, utilice el siguiente código.
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
}
},
Guarde y cierre el archivo.
Vaya a la CustomErrorManager-1.0-SNAPSHOT
y cree un archivo de carpetas jcr_root y META-INF. Cambie el nombre del archivo a CustomErrorManager-1.0-SNAPSHOT.zip.
Utilice el administrador de paquetes para cargar e instalar el paquete.
Utilice el paquete adjunto para mostrar simultáneamente mensajes de error para todos los campos. Para mostrar un solo mensaje de error, utilice el perfil predeterminado.
Vaya a etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css folder.
Abra el archivo sample.css para editarlo. El archivo css contiene 2 id: #customError, #customWarning. Puede utilizar estos identificadores para cambiar diversas propiedades, como color, tamaño de fuente, etc.
Utilice el siguiente código para cambiar el tamaño y el color de la fuente de los mensajes de error/advertencia.
#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.
Guarde y cierre el archivo.
Vaya a la carpeta CustomErrorManager-1.0-SNAPSHOT y cree un archivo de carpetas jcr_root y META-INF. Cambie el nombre del archivo a CustomErrorManager-1.0-SNAPSHOT.zip.
Utilice el administrador de paquetes para cargar e instalar el paquete.
De forma predeterminada, los formularios HTML5 utilizan un perfil predeterminado: https://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location="">&template=<name of="" the="" xdp="">
Para ver un formulario con los mensajes de error personalizados, represente el formulario con un perfil de error: https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location="">&template=<name of="" the="" xdp="">
El paquete adjunto instala el perfil de error.