26.01.2025

Personalizando Mensagens de Erro em Formulários HTML: Como Fazer?

Resposta Rápida

Para personalizar mensagens de erro em formulários HTML, utilize o método setCustomValidity junto com manipuladores de eventos para o elemento de entrada:

let emailInput = document.getElementById('meuEmail');

emailInput.addEventListener('invalid', () => {
    emailInput.setCustomValidity('Mensagem de erro personalizada para o campo de e-mail');
});

emailInput.addEventListener('input', () => {
    emailInput.setCustomValidity('');
});

Dessa forma, você anexa manipuladores de eventos ao campo de e-mail, que definem uma mensagem personalizada para entradas inválidas e a limpam quando o usuário digita um novo valor.

Usando Atributos HTML5 para Validação

O HTML5 oferece os atributos pattern e required, que permitem definir requisitos de formato para os dados de entrada e marcar campos como obrigatórios.

<input type="text" id="telefone" pattern="[0-9]{10}" title="Por favor, utilize apenas dígitos. Infelizmente, o contato com Hogwarts está temporariamente indisponível." required>

Se os dados inseridos não corresponderem ao padrão especificado, o usuário verá a dica fornecida no atributo title.

Gerenciando Múltiplas Mensagens de Erro

Erros podem ocorrer com qualquer um. É essencial estar preparado para diferentes cenários.

function gerenciarMensagensDeErro(elementoEntrada) {
    if(elementoEntrada.validity.patternMismatch) {
        elementoEntrada.setCustomValidity("Erro: O valor não corresponde ao padrão.");
    } else if(elementoEntrada.validity.valueMissing) {
        elementoEntrada.setCustomValidity("Erro: Valor necessário.");
    } else {
        elementoEntrada.setCustomValidity("");
    }
}

Usar funções JavaScript para gerenciar erros simplifica significativamente essa tarefa!

Fornecendo Feedback em Tempo Real com Manipuladores de Eventos

Ao usar os manipuladores de eventos oninput e onchange, você pode implementar a limpeza imediata de erros, o que melhora muito a experiência do usuário com os formulários.

emailInput.oninput = () => {
    emailInput.setCustomValidity('');
};

Garantindo Compatibilidade entre Navegadores

Teste sua solução em diferentes navegadores para evitar situações em que "funciona na minha máquina."

Gerenciamento Eficiente das Mensagens de Erro

Mantenha as mensagens de erro em arquivos separados para apoiar os princípios DRY (Don't Repeat Yourself) e facilitar a internacionalização.

Visualização

Podemos visualizar o processo de tratamento de erros na validação como uma apresentação teatral:

Cena (🎭): Formulário HTML com Validação
Roteiro (📜): Mensagens de Erro Padrão
Atores (🎩): Elementos do Formulário (ex: <input>, <select>)

A cortina sobe:

// O diretor reescreve o roteiro.
document.getElementById('email').oninvalid = function(event) {
    event.target.setCustomValidity('🌟 Por favor, insira um e-mail válido!');
};

Antes e Depois:

Antes: [📄 "Por favor, preencha este campo."]
Depois:  [🌟 "Por favor, insira um e-mail válido!"]

👉 Você consegue ver a diferença? Ao assumir o papel de diretor, você pode reescrever o roteiro para melhor atender ao seu formulário!

Usando jQuery para Validação de Formulários Complexos

O jQuery fornece funções para definir mensagens de erro personalizadas.

$('form').validate({
    rules: {
        meuEmail: {
            required: true,
            email: true
        }
    },
    messages: {
        meuEmail: {
            required: "Seu e-mail é necessário para contato.",
            email: "O formato do e-mail deve ser: eu@dominio.com"
        }
    }
});

Recursos Úteis

1. Validação de Restrições - HTML | MDN — Descrição sobre como personalizar mensagens de erro durante a validação de formulários HTML5.
2. Validação de Formulários do Lado do Cliente | MDN — Guia aprofundado sobre validação de formulários do lado do cliente.
3. LukeW | Design de Formulários Web: Preencher as Lacunas — Uma riqueza de informações úteis sobre design de formulários.
4. Declarando Língua em HTML — Guia sobre como declarar o idioma do documento para internacionalização.
5. validate.js — Uma poderosa biblioteca para validação de formulários em JavaScript.

Video

Navigation