Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Checar o preenchimento do checkbox

Olá! Sou novato no javascript, mas já tenho uma necessidade. hehe Estou montando um formulário que obrigue a pessoa a selecionar uma checkbox antes de clicar no submit. Se clicado no botão sem selecionar a caixa de seleção, deve aparecer uma mensagem de erro. Como fazer no javascript? =)

5 respostas

Oi Victor, tudo bom? para isso seria legal vc entender como a linguagem do JS se integra com o browser e quais eventos podemos mandar para ele e vice-versa. Temos esse curso de Validação de Formulários com JS que pode te ajudar https://cursos.alura.com.br/course/validacao-javascript-html5

Oi, Vitor, tudo bem?

O HTML5 tem uma espedificação dentro do input que facilita muito esse processo de validação que é o required, ele transforma os valores dos inputs obrigatórios, ou seja, quando adicionando o required o usuário não poderará submeter sem marcar uma opção, um exemplo:

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" required >

Espero ter te ajudado!

Oi, eu estou fazendo o curso de javascript, é que a necessidade era urgente. E Laís, eu já estou o required do html, hehe. Eu queria que aparecesse uma mensagem mais amigável ao usuário. Por enquanto eu fiz uma gambiarra com php, mas é temporário.

solução!

Oi, Victor.

Você pode utilizar o evento invalid para te auxiliar juntamente com o método setCustomValidity(), ficando assim:

 <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" required oninvalid="this.setCustomValidity('Campo obrigatório')">

Agora, você pode por uma mensagem personalizada para o usuário. Para saber mais: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity

Espero que te ajude :}

Obrigado! Vai ajudar muito! =)