Neste artigo você vai aprender a como criar uma máscara JavaScript para validação de horas – com HTML e JavaScript puros!

Mascara JavaScript para validação de horas capa

Fala programador(a), beleza? Bora aprender mais sobre máscaras em JavaScript e também criação de máscara de horário com JS!

A ideia deste tópico é promover uma solução simples para um agendamento de horário, por exemplo, que deve ser marcado pelo usuário por um input

Por meio de uma expressão regular vamos criar a máscara em JS, e ainda utilizar um atributo não tão conhecido de input do HTML

O atributo pattern aceita uma regex para condicionar os dados que serão inseridos no input e faz uma validação prévia antes do envio

Vamos então utilizar uma regex bem específica, que é:

([01][0-9]|2[0-3]):[0-5][0-9]

Exemplos de horários aceitos e não aceitos por esta regex:

// Válidos
12:59
00:33
01:12
11:35
02:00

// Inválidos
24:59
46:21
50:60
06:1222342
32423:12

E agora vamos unir a nossa regex ao form de HTML que envia os horários para o sistema, a solução final é:

<form>
  <input type="text" pattern="([01][0-9]|2[0-3]):[0-5][0-9]" required />
  <input type="submit" value="Enviar horário">
</form>

Desta maneira o input de texto vai avaliar seu conteúdo por meio da regex que vimos antes, que cabe apenas horários válidos

Caso o usuário insira algum horário inválido uma mensagem será exibida a ele

E o atributo required faz o input ser obrigatório, não permitindo horários vazios

Conclusão

Neste artigo vimos como criar uma máscara JavaScript para validação de horas

A abordagem foi bem interessante, pois não utilizamos função alguma para o JS e delegamos a responsabilidade toda para o HTML

Utilizando a função do atributo pattern, que nos permite inserir um  determinado padrão para ser verificado no envio do formulário e aí validar o horário com JavaScript, mesmo sendo apenas por meio da regex

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

 

 

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários