Máscara JavaScript para validação de horas

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

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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