Validating checkbox with javascript

Question

I have problem to validate multi checkbox , I want to check if the user has selected at least one checkbox. Im try with document.getElementByClassName but does not work

HTML:

<form id="formupload" method="post" enctype="multipart/form-data" action="upload.php" name="formupload">
    <input onKeydown="javascript:validateForm();" id="txtFileName" name="txtFileName" />
    <input onKeydown="javascript:validateForm();" id="title" name="title" />
    <input onKeydown="javascript:validateForm();" id="keywords" name="keywords" />
    <input onKeydown="javascript:validateForm();" id="description" name="description" />


        <span class="niche">
        <input type="checkbox" value="1" name="channel[]" class="css-checkbox" id="box_1">
        <label class="css-label" name="lbl_1" for="box_1">Amateur</label>
        </span>

        <span class="niche">
        <input type="checkbox" value="2" name="channel[]" class="css-checkbox" id="box_2">
        <label class="css-label" name="lbl_2" for="box_2">Amateur</label>
        </span>

        <span class="niche">
        <input type="checkbox" value="3" name="channel[]" class="css-checkbox" id="box_3">
        <label class="css-label" name="lbl_3" for="box_3">Amateur</label>
        </span>

<button id="btnSubmit" class="btn lbtn upBtn" type="submit">Upload</button>
</form>

And Here is javascript:

function validateForm() {
    var txtFileName = document.getElementById("txtFileName");
    var titleTxt = document.getElementById("title");
    var tagsTxt = document.getElementById("keywords");
    var descTxt = document.getElementById("description");

    var isValid = true;
    if (txtFileName.value === "" || titleTxt.value === "" || tagsTxt.value === "" || descTxt.value === "" ) {
        isValid = false;
    }

    document.getElementById("btnSubmit").disabled = !isValid;

}

Where are you even attempting to determine the state of the check boxes? The JavaScript code posted only looks at some "untyped" input elements (which I guess default to text boxes?) but doesn't look at the check boxes at all. (Which are invalid, by the way. The input tags for the check boxes need to be closed.) — David
– David, Commented May 20, 2013 at 16:29
You could try if (document.getElementById("formupload").querySelectorAll('input[name="channel[]"]:checked').length > 0) { } — Ian
– Ian, Commented May 20, 2013 at 16:29
@David input elements do not need to be closed, as they may not contain any content. In fact, the spec forbids a closing tag. — Ray Nicholus
– Ray Nicholus, Commented May 20, 2013 at 16:32
@RayNicholus: Interesting. I didn't know that, but W3C just confirmed it. Too bad it's past the edit window for my comment. Either way, thanks for teaching me something new! — David
– David, Commented May 20, 2013 at 16:36
@David You are quite welcome. After looking at the spec again, I learned that the closing tag was actually forbidden. I didn't recall that tidbit myself. Just knew that it was not required. I'm not sure if this detail is enforced in all browsers though. — Ray Nicholus
– Ray Nicholus, Commented May 20, 2013 at 16:41

rahul maindargi · Accepted Answer · 2013-05-20 16:43:14Z

1

var checkBoxes=document.getElementsByClassName("css-checkbox");

var booleanResult=false;
for(var i=0;i<checkBoxes.length;i++){
 if(checkBoxes[i].checked){
    booleanResult=true;
    break;
 }
}
if(booleanResult==false){
alert("invalid")
}

DEMO

edited May 20, 2013 at 16:43

answered May 20, 2013 at 16:29

rahul maindargi

5,7052 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phaedrus Over a year ago

It should be if(checkBoxes[i].checked). Also, i believe it should be getElementsByTagName('input'), with a check for type=='checkbox' in the for loop.

Phaedrus Over a year ago

Keep in mind getElementByClassName isn't supported by IE versions before 9.0.

Milan Milosevic Over a year ago

@Phaedrus So it is better var checkBoxes=document.getElementsByName("channel[]");

Ian · Accepted Answer · 2013-05-20 16:57:03Z

Depending on whether you want to target the class or the name, you could try querySelectorAll:

var form = document.getElementById("formupload");
if (form.querySelectorAll('input[name="channel[]"]‌:checked').length > 0) {

}
// or
if (form.querySelectorAll('input.css-checkbox:checked').length > 0) {

}

Of course, you could add [type="checkbox"] to either of those, but it seems kind of unnecessary.

document.querySelectorAll has better support in older browsers and is more versatile.

Of course, if you want better support than that, you could get all checkboxes, loop through them and check if they have the class, then see if there's more than one checked. For example:

var form = document.getElementById("formupload"),
    inputs = form.getElementsByTagName("input"),
    i, cur, enoughChecked = false;
for (i = 0; i < inputs.length; i++) {
    cur = inputs[i];
    if (cur.type === "checkbox" && hasClass(cur, "css-class") && cur.checked) {
        enoughChecked = true;
        break;
    }
}
if (enoughChecked) {
    // At least 1 checkbox is checked
}

function hasClass(element, className) {
    return !!~(" " + element.className + " ").indexOf(" " + className + " "));
}

Reference:

https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

Collectives™ on Stack Overflow

Validating checkbox with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related