Personalización de mensajes de error para formularios HTML5

En los formularios 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 únicamente para un campo seleccionado y solo se muestra un error.

El artículo proporciona los pasos para personalizar los mensajes de error de los formularios HTML5 a,

  • cambiar el aspecto y la posición de los mensajes de error. Puede hacer que aparezca un error en la parte superior, inferior y derecha de cualquier campo.
  • mostrar mensajes de error para varios campos en un momento determinado.
  • muestre el error independientemente de si un campo está seleccionado o no.

Personalización de mensajes de error 

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.

Obtener archivo

Personalización de la posición de los mensajes de error 

Para personalizar la posición del mensaje de error, añada la etiqueta <div> para cada campo de error y advertencia, coloque la etiqueta <div> a la izquierda o a la derecha y aplique los estilos css en la etiqueta <div> . Para ver los pasos detallados, consulte el procedimiento que se muestra a continuación:

  1. Vaya a la carpeta CustomErrorManager-1.0-SNAPSHOTy abra la carpeta etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript.

  2. Abra el archivo customErrorManager.js para editarlo. La función markError del archivo acepta los siguientes parámetros:

    jqWidget jqWidget es el identificador de la utilidad.
    msg contiene el mensaje de error
    tipo indica si es un error o una advertencia
  3. 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
                }
    
            },
    
  4. Guarde y cierre el archivo.

  5. Vaya a la carpeta CustomErrorManager-1.0-SNAPSHOT y cree un archivo de las carpetas jcr_root y META-INF. Cambie el nombre del archivo a CustomErrorManager-1.0-SNAPSHOT.zip.

  6. Utilice el administrador de paquetes para cargar e instalar el paquete.

Mostrar mensajes de error en varios campos 

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.

Personalización del aspecto de los mensajes de error. 

  1. Vaya a etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css folder.

  2. 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.
    
  3. Guarde y cierre el archivo.

  4. 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.

  5. Utilice el administrador de paquetes para cargar e instalar el paquete.

Representar el formulario con el nuevo perfil. 

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>

NOTA

El paquete adjunto instala el perfil de error.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now