multiple checkbox validation in javascript
In your application you can use single check box or you can use multiple checkbox . If you use multiple checkbox then how to validate multiple checkbox .
Below examples will help you to understand multiple checkbox validation in javascript .
Example 1
In the below small checkbox example there are four colors and user has to select minimum one color.
If user doesn't select any color and clicks the submit form then display below alert popup.
if user selects color then click submit button then display below success popup.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple checkbox Validation in javascript </title>
<style>
.header {
text-align: center;
background-color: rgb(10, 165, 179);
color: white;
padding: 10px;
}
.wrapper {
width: 20%;
margin: auto;
border-radius: 8px;
box-shadow: 0 3px 10px rgb(54, 54, 54);
overflow: hidden;
}
.item {
padding: 10px;
margin-left: 40px;
}
button {
display: block;
margin: 10px auto;
outline: none;
padding: 12px;
border: none;
background-color: rgb(47, 47, 47);
border-radius: 8px;
color: white;
cursor: pointer;
width: 150px;
}
.result {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h3>Items</h3>
</div>
<form id="itemForm">
<div class="item">
<label for="green">Green</label>
<input id="green" type="checkbox" value="Green">
</div>
<div class="item">
<label for="pink">Pink</label>
<input id="pink" type="checkbox" value="Pink">
</div>
<div class="item">
<label for="yellow">Yellow</label>
<input id="yellow" type="checkbox" value="Yellow">
</div>
<div class="item">
<label for="black">Black</label>
<input id="black" type="checkbox" value="Black">
</div>
<button id="submit">Submit</button>
</form>
</div>
<p class="result"></p>
<script>
var itemForm = document.getElementById('itemForm'); // getting the parent container of all the checkbox inputs
var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]'); // get all the check box
document.getElementById('submit').addEventListener('click', getData); //add a click event to the save button
let error = true;
function getData() { // this function will get called when the save button is clicked
checkBoxes.forEach(item => { // loop all the checkbox item
if (item.checked) { //if the check box is checked
error = false;
}
});
if (error) {
alert("Minimum one color you have to pick..");
}
else {
alert("Successfully submitted..");
}
}
</script>
</body>
</html>
Example 2
In the below small checkbox example there are four colors and user has to select minimum two colors . For validation i have used selectedItems array , so when user checks the checkbox then store that item to the selectedItems array , then check the length of that array when user clicks the submit button . if the length is less than two show the error popup else show the success popup.
If user doesn’t select minimum two colors then show the below popup
if the user selects two colors then show the success popup.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple checkbox Validation in javascript </title>
<style>
.header {
text-align: center;
background-color: rgb(10, 165, 179);
color: white;
padding: 10px;
}
.wrapper {
width: 20%;
margin: auto;
border-radius: 8px;
box-shadow: 0 3px 10px rgb(54, 54, 54);
overflow: hidden;
}
.item {
padding: 10px;
margin-left: 40px;
}
button {
display: block;
margin: 10px auto;
outline: none;
padding: 12px;
border: none;
background-color: rgb(47, 47, 47);
border-radius: 8px;
color: white;
cursor: pointer;
width: 150px;
}
.result {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h3>Items</h3>
</div>
<form id="itemForm">
<div class="item">
<label for="green">Green</label>
<input id="green" type="checkbox" value="Green">
</div>
<div class="item">
<label for="pink">Pink</label>
<input id="pink" type="checkbox" value="Pink">
</div>
<div class="item">
<label for="yellow">Yellow</label>
<input id="yellow" type="checkbox" value="Yellow">
</div>
<div class="item">
<label for="black">Black</label>
<input id="black" type="checkbox" value="Black">
</div>
<button id="submit">Submit</button>
</form>
</div>
<p class="result"></p>
<script>
var itemForm = document.getElementById('itemForm'); // getting the parent container of all the checkbox inputs
var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]'); // get all the check box
document.getElementById('submit').addEventListener('click', getData); //add a click event to the save button
let selectedItems = [];
function getData() { // this function will get called when the save button is clicked
checkBoxes.forEach(item => { // loop all the checkbox item
if (item.checked) { //if the check box is checked
selectedItems.push(item);
}
});
if (selectedItems.length < 2) { // check the selectedItems array length is less than 2 the throw error
alert("Minimum two colors you have to pick..");
}
else {
alert("Successfully submitted..");
}
}
</script>
</body>
</html>
I hope this article is helpful for you , i am very glad to help you thanks for reading