JavaScript Checkbox Validation on Form Submit

Table of Contents

Read checkbox status
Validate before submit
Complete source

A checkbox can collect a single yes/no choice or several independent selections. JavaScript can read the checked property and validate required choices before a form is submitted.

Managing Checkboxes by Reading status and validating with option to enable or disable in a form

Read the Status of Multiple Checkboxes Top ↑

<form id="skills-form">
  <label><input type="checkbox" name="c1" id="c1" value="Python"> Python</label>
  <label><input type="checkbox" name="c2" id="c2" value="PHP"> PHP</label>
  <label><input type="checkbox" name="c3" id="c3" value="JavaScript"> JavaScript</label>
  <button type="button" id="check-status">Submit</button>
</form>
<div id="d1" aria-live="polite">Output here</div>

const statusButton = document.getElementById("check-status");
const output = document.getElementById("d1");

statusButton.addEventListener("click", () => {
  const selected = [...document.querySelectorAll('#skills-form input[type="checkbox"]:checked')]
    .map((checkbox) => checkbox.value);
  output.textContent = selected.length
    ? `Selected: ${selected.join(", ")}`
    : "No checkbox selected";
});

For one checkbox, document.getElementById("c1").checked returns a Boolean. See getElementById() and getElementsByName().

Validate Radio Buttons and Terms Checkbox Top ↑

The original example requires a gender radio choice and an agreement checkbox. The modern version listens for the form's submit event instead of a document-wide click event.

DEMO of checkbox validation

<form id="terms-form" action="action_page.php" method="post">
  <fieldset>
    <legend>Gender</legend>
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </fieldset>
  <label><input type="checkbox" name="agree" value="yes"> I agree to terms and conditions</label>
  <div id="my_msg" aria-live="polite">Submit the form by clicking the button</div>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

const form = document.getElementById("terms-form");
const message = document.getElementById("my_msg");

form.addEventListener("submit", (event) => {
  const gender = form.querySelector('input[name="gender"]:checked');
  const agree = form.elements.agree.checked;

  if (!gender) {
    event.preventDefault();
    message.textContent = "Select gender before submitting.";
    return;
  }

  if (!agree) {
    event.preventDefault();
    message.textContent = "Agree to the terms and conditions before submitting.";
    return;
  }

  message.textContent = "Validation is complete.";
});

form.addEventListener("reset", () => {
  message.textContent = "Submit the form by clicking the button";
});

Complete Working Source Top ↑

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Checkbox Validation</title></head>
<body>
<form id="terms-form" action="action_page.php" method="post">
  <fieldset>
    <legend>Gender</legend>
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </fieldset>
  <label><input type="checkbox" name="agree" value="yes"> I agree to terms and conditions</label>
  <div id="my_msg" aria-live="polite">Submit the form by clicking the button</div>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>
<script>
const form = document.getElementById("terms-form");
const message = document.getElementById("my_msg");

form.addEventListener("submit", (event) => {
  const gender = form.querySelector('input[name="gender"]:checked');
  const agree = form.elements.agree.checked;

  if (!gender) {
    event.preventDefault();
    message.textContent = "Select gender before submitting.";
    return;
  }

  if (!agree) {
    event.preventDefault();
    message.textContent = "Agree to the terms and conditions before submitting.";
    return;
  }

  message.textContent = "Validation is complete.";
});

form.addEventListener("reset", () => {
  message.textContent = "Submit the form by clicking the button";
});
</script>
</body>
</html>

Disable Checkbox

JavaScript Checkbox Reference

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

shashi	24-06-2010
thanks for such a small and beautiful script. It worked exactly the way i want.

Lesley Olley	08-09-2011
Could I add another range of radio button with a different criteria into the same form?

vamshi	22-10-2011
I want a script for both the radio buttons in such a way that one text field should be displayed when I select Yes radio button and another text field should be displayed when I select No radio button. Please do the needful and I need it as soon as possible. Thanks in advance, Vamshi.

Senthilnathan.V	02-04-2012
Can i have a script which will embed with regular expression in C#

Richa	23-08-2012
I want a html code with a textbox and a button with a fuction to handle onclick event of botton which displays the text written in the textbox on the botton. I shall be lookinf for all our positive respons!! plz post it as soon as possible..

jayashree	10-10-2012
How to validate list in javascript.Please send it as soon as possible