Multiple checkbox validation in javascript

Multiple checkbox validation in javascript

JavaScript 02-08-2021 Saheb Sutradhar

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. 

 

 

multiple checkbox validation in javascript

 

If user doesn't select any color and clicks the submit form then display below alert popup.

multiple checkbox validation in javascript

 

if user selects color then click submit button then display below success popup.

multiple checkbox validation in javascript

 

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.

multiple checkbox validation in javascript

 

If user doesn’t select minimum two colors then show the below  popup

multiple checkbox validation in javascript

 

if the user selects two colors then show the success popup.

multiple checkbox validation in javascript

 

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

 

 

Related Posts

Card image cap

Math Floor Javascript Method

JavaScript 16-07-2021 Saheb Sutradhar

math.floor javascript method takes a number type value as parameter and returns the round off of that value. The return value will be the nearest downward integ ...

Card image cap

Spread Operator in JavaScript

JavaScript 20-07-2021 Saheb Sutradhar

In this post we will learn what is spread operator in Javascript? How we can use it ? and Where we should use? Spread Operator allows you to spread out the ele ...

Card image cap

Remove duplicates from array in javascript

JavaScript 24-07-2021 Saheb Sutradhar

In this post i will show you how to remove duplicates from array in javascript.We can use filter() method to remove duplicates from array , if the index of the ...

Card image cap

Next and Previous Buttons in Javascript with Demo

JavaScript 27-07-2021 Saheb Sutradhar

In this post we will learn how to use next and previous buttons in javascript with demo application , the below example there is  image container and next, pre ...

Card image cap

Image size validation in javascript example

JavaScript 28-07-2021 Saheb Sutradhar

In this article you will learn Image size validation in javascript with example , along with the size validation you will learn how to validate image mime type. ...

Card image cap

How to get multiple checkbox value in javascript

JavaScript 30-07-2021 Saheb Sutradhar

In this post you will learn how to get multiple checkbox value in javascript . In many application you will find this kind of feature where we allow user to sel ...