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