Como validar checkbox com Javascript

12 de outubro de 2024 C. Junior

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.