Não perca essa dica de como personalizar mensagens na validação de formulários no HTML5
No post de hoje vou demonstrar como personalizar as mensagens para validação de formulários no HTML5, essa dica pode deixar as validações de formulários mais intuitivas para os usuários.
A especificação do HTML5 trouxe uma gama de novas funcionalidades que facilitam muito o desenvolvimento.
Para formulários foram adicionados vários “types” de input, além de melhorias na validação como o atributo “pattern” e APIs JavaScript.
O leitor pode conhecer os novos atributos visitando a documentação oficial da W3C.
Nesse post vamos personalizar as mensagens de validação em formulários criando regras no atributo “pattern” e as mensagens usando a função “setCustomValidity()“.
Atributo Pattern
O atributo “pattern” tem como objetivo impor um conjunto de regras padrão para um controle de formulário que detalhe formatos válidos específicos.
Esse conjunto de regras deve ser informado em forma de expressões de regulares.
Exemplo de um input com expressão regular para aceitar apenas letras minúsculas e sem espaços:
|
1 |
<input type="text" name="nome" pattern="[a-z]+$"> |
Função setCustomValidity()
A função “setCustomValidity()” tem como objetivo lidar com erros obtidos no código da aplicação.
Podemos passar uma mensagem de erro personalizada como parâmetro quando a expressão do nosso atributo “pattern” não for atendida.
Passamos a função no atributo “oninvalid” que é disparado sempre que o valor do input for inválido, isso ocorre no momento da submissão do formulário.
Se o valor for correto então limpamos a mensagem usando “setCustomValidity(”)” no atributo “onchange“.
As mensagens de validação no HTML5 podem ser personalizadas de 2 maneiras:
1 – Podemos chamar a validação inline no próprio elemento HTML:
|
1 2 3 4 |
<form> <input type="text" name="nome" pattern="[a-z\s]+$" oninvalid="setCustomValidity('Somente Letras Minúsculas!')" onchange="try{setCustomValidity('')}catch(e){}"> <input type="submit" value="Gravar"> </form> |
2 – Também podemos setar as mensagens de validação usando JavaScript através dos respectivos eventos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form> <input type="text" name="nome" id="nome" pattern="[a-z]+$"> <input type="submit" value="Gravar"> </form> <script type="text/javascript"> var inputNome = document.getElementById('nome'); inputNome.addEventListener('invalid', function() { inputNome.setCustomValidity('Somente Letras Minúsculas!'); }, false); inputNome.addEventListener('change', function() { inputNome.setCustomValidity(''); }, false); </script> |
- Quando trabalhamos inline usamos os atributos “oninvalid” e “onchange” para setar as mensagens.
- Usando JavaScript usamos os eventos “invalid” e “change” para setar as mensagens.
As 2 formas de chamar a validação produzem o mesmo resultado ao pressionar o botão “Gravar”: 
Personalizando mensagens para validação de formulários no HTML5
Agora que já sabemos para que serve o atributo “pattern” e também com usar a função “setCustomValidaty()” é hora de por a mão na massa!
Todas as expressões regulares usadas nos exemplos foram extraídas desse post http://wbruno.com.br/html/validando-formularios-apenas-com-html5/ escrito pelo meu xará “William Bruno”.
Abaixo exemplos de expressões regulares e mensagens personalizadas para validação de formulários no HTML5:
Observações:
- Validações no lado Cliente são apenas para melhorar usabilidade do formulário e não representam segurança em nossas aplicações.
- É indicado sempre que possível usar máscaras nos campos para orientar o usuário sobre como deve ser o preenchimento do campo.
Input Somente Letras
Esse formulário possui um “Input” que aceita apenas letras:
|
1 2 3 4 |
<form> <input type="text" name="nome" pattern="[A-Z\s][a-z\s]+$" oninvalid="setCustomValidity('Somente Letras!')" onchange="try{setCustomValidity('')}catch(e){}"> <input type="submit" value="Gravar"> </form> |
Input Placa de Carro
Esse formulário possui um “Input” que aceita letras e números “XXX-0000” para identificar a placa de um veículo:
|
1 2 3 4 |
<form> <input type="text" name="nome" pattern="[A-Z]{3}-[0-9]{4}$" oninvalid="setCustomValidity('Formato da Placa Inválido!')" onchange="try{setCustomValidity('')}catch(e){}"> <input type="submit" value="Gravar"> </form> |
Input Hora
Esse formulário possui um “Input” que aceita números no formato de hora “HH:MM:SS”:
|
1 2 3 4 |
<form> <input type="text" name="nome" pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}$" oninvalid="setCustomValidity('Formato de Hora Inválido!')" onchange="try{setCustomValidity('')}catch(e){}"> <input type="submit" value="Gravar"> </form> |
Input Valor Monetário
Esse formulário possui um “Input” que aceita valores monetários com o mínimo de “0,00” e o máximo de “000.000,00”:
|
1 2 3 4 |
<form> <input type="text" name="nome" pattern="([0-9]{1,3}\.)?[0-9]{1,3},[0-9]{2}$" oninvalid="setCustomValidity('Formato do Valor Monetário Inválido!')" onchange="try{setCustomValidity('')}catch(e){}"> <input type="submit" value="Gravar"> </form> |
Validação X Máscara
Como já citei acima, não podemos confundir validação de dados com uso de máscaras em campos, em conjunto os dois itens melhoram a usabilidade do fomulário.
As validações garantem a qualidade dos dados enviados para o servidor, informando para o usuário possíveis erros no momento do envio.
As máscaras orientam o usuário no preenchimento de determinados campos, indicando a maneira correta no momento do preenchimento.
Conclusão
Bom pessoal nesse post demonstrei como podemos personalizar mensagens para validação de formulários no HTML5, usando o atributo “pattern” e a função “setCustomValidity()“.
Nos dias atuais quanto mais intuitivo for nosso formulário melhor será a experiência do usuário, então vale a pena personalizar as mensagens de erro.
Existem diversos tipos de validações que podem ser feitas quando estamos trabalhando com expressões regulares, tudo depende da necessidade do formulário.
Espero que tenham gostado e até a próxima …
Se você gostou compartilhe esse post nas redes sociais, ajude o blog DevWilliam a crescer!
