Não perca essa dica de como personalizar mensagens na validação de formulários no HTML5

Aprenda como personalizar mensagens para validação de formulários no HTML5No 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()“. 

Post relacionado:  Validar Formulário usando JavaScript

 

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:

 

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:

 

2 – Também podemos setar as mensagens de validação usando JavaScript através dos respectivos eventos:

  • 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”: Validar-somente-letras-Minúsculas

 

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!Exemplos de validação no HTML5

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:

Validar-Somente-Letras-no-Input

 

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:

Validar-Placa-de-Veículo

 

Input Hora

Esse formulário possui um “Input” que aceita números no formato de hora “HH:MM:SS”:

Validar-Formato-Hora

 

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”:

Validar-Valor-Monetário

 

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.Validação X Máscara

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()“.

Post relacionado:  Aprenda como fazer Upload de imagens usando AJAX e PHP sem Refresh na Página

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!

Show Buttons
Hide Buttons