Personalização de mensagens de erro para formulários HTML5

Em formulários HTML5, prontos para uso, as mensagens e avisos de erro têm uma posição e aparência fixas (fonte e cor), o erro é exibido somente para um campo selecionado e apenas um erro é exibido.

O artigo fornece as etapas para personalizar mensagens de erro de formulários HTML5 para o ,

  • alterar a aparência e a posição das mensagens de erro. Você pode fazer um erro para aparecer na parte superior, inferior e à direita de qualquer campo.
  • exibir mensagens de erro para vários campos em um determinado momento.
  • exiba o erro independentemente de um campo estar selecionado ou não.

Personalização de mensagens de erro 

Antes de personalizar as mensagens de erro, baixe e extraia o pacote anexado (CustomErrorManager-1.0-SNAPSHOT.zip).

Após extrair o pacote, abra a pasta CustomErrorManager-1.0-SNAPSHOT . Ele contém pastas jcr_root e META-INF. Essas pastas contêm os arquivos CSS e .JS necessários para personalizar a mensagem de erro.

Obter arquivo

Personalização da posição das mensagens de erro 

Para personalizar a posição da mensagem de erro, adicione a tag <div> para cada campo de erro e aviso, posicione a tag <div> à esquerda ou à direita e aplique estilos de css na tag <div> . Para obter etapas detalhadas, consulte o procedimento listado abaixo:

  1. Navegue até a pasta CustomErrorManager-1.0-SNAPSHOTe abra a pasta etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript.

  2. Abra o arquivo customErrorManager.js para edição. A função markError no arquivo aceita os seguintes parâmetros:

    jqWidget jqWidget é o identificador do widget.
    msg contém a mensagem de erro
    tipo indica se é um erro ou aviso
  3. Na implementação predefinida, mensagens de erro são exibidas à direita do campo . Para que as mensagens de erro apareçam na parte superior, use o seguinte 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. Salve e feche o arquivo.

  5. Navegue até a pasta CustomErrorManager-1.0-SNAPSHOT e crie um arquivo de pastas jcr_root e META-INF . Renomeie o arquivo para CustomErrorManager-1.0-SNAPSHOT.zip.

  6. Use o gerenciador de pacotes para fazer upload e instalar o pacote.

Exibir mensagens de erro para vários campos 

Use o pacote anexado para exibir simultaneamente mensagens de erro para todos os campos. Para exibir uma única mensagem de erro, use o perfil padrão.

Personalização da aparência das mensagens de erro. 

  1. Navegue até etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css folder.

  2. Abra o arquivo sample.css para edição. O arquivo css contém 2 ids- #customError, #customWarning. É possível usar essas IDs para alterar várias propriedades, como cor, tamanho da fonte etc.

    Use o código a seguir para alterar o tamanho da fonte e a cor das mensagens de erro/aviso.

    #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. Salve e feche o arquivo.

  4. Navegue até a pasta CustomErrorManager-1.0-SNAPSHOT e crie um arquivo de pastas jcr_root e META-INF. Renomeie o arquivo para CustomErrorManager-1.0-SNAPSHOT.zip.

  5. Use o gerenciador de pacotes para fazer upload e instalar o pacote.

Renderize o formulário com o novo perfil. 

Imediatamente, os formulários html5 usam um perfil padrão: https://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location>&template=<nome do xdp>

Para exibir um formulário com mensagens de erro personalizadas, renderize o formulário com um perfil de erro: https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<nome do xdp>

OBSERVAÇÃO

O pacote anexado instala o perfil de erro.

Nesta 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