Como validar checkbox com Javascript
Como Validar um Checkbox com JavaScript:
Validar checkboxes em formulários é uma tarefa comum no desenvolvimento web, especialmente quando há a necessidade de garantir que o usuário selecionou uma ou mais opções antes de enviar um formulário. Neste post, vou mostrar como validar um checkbox de forma eficiente utilizando JavaScript.
O que é um Checkbox?
Um checkbox é um elemento de formulário que permite ao usuário selecionar uma ou mais opções entre as várias disponibilizadas em uma pagina. Ele geralmente utilizado para definir aceite de termos e condições, selecionar preferências em lista, entre outros cenários que possa existir em uma página html.
Aqui está um exemplo de como montar a base do HTML que vamos utilizar:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Validação de Checkbox</title></head><body> <div class="container"> <label> <input type="checkbox" id="checkbox"> Aceito os termos e condições </label> <buttontype="button" onclick="validarCheckbox();"> Validar </button> <p id="info"></p> </div></body></html>
Depois adiciono o css responsável pela estilização da página :
<style> body { width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; font-size: 2rem; font-weight: 900; } label { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; } #checkbox { width: 1.5rem; height: 1.5rem; } #info { display: flex; color: black; } button { padding: 0.8rem; border: none; background-color: #3e83c5 !important; color: white; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.125rem; } </style>
Por ultimo adiciono o script responsável por adicionar a lógica de validação:
<script> const checkbox = document.getElementById('checkbox'); const info = document.getElementById('info'); function validarCheckbox() { info.textContent = checkbox.checked ? 'O checkbox está marcado.' : 'O checkbox não está marcado.'; info.style.color = checkbox.checked ? 'green' : 'red'; }</script>
Aqui está uma breve explicação do código acima:
- Declaração de constantes: Nas primeiras 2 linhas declaro as variaveis contantes que farão a referência aos elementos do checkbox e da mensagem de informação (info).
- Função usada para validação (validarCheckbox)
- Verifica o estado do checkbox (marcado ou não).
- Atualiza o texto no elemento
info, exibido a informção se o checkbox está ou não marcado, dependendo do estado do checkbox. - Muda a cor da mensagem para verde ou vermelho, dependendo do estado do checkbox.
Deixo aqui um vídeo curto mostrando o processo:
Conclusão
Validar checkboxes com JavaScript é uma tarefa simples e essencial para garantir que o usuário forneça as informações necessárias e corretas para uma aplicação ou formulário. Usando a função
.checked é possível verificar se o checkbox está selecionado e impedir o envio do formulário caso a validação falhe, evitando assim inconsistências nas informações enviadas pelo usuário. Além disso, fornecer um feedback imediato ao usuário melhora a usabilidade do seu formulário ou aplicação.
Código fonte de como validar checkbox Javascript:
