How to validate checkboxes on submit button?

Question

I have a simply question but I try many things but they not working as I expect.

Problem: 1. A few checkboxes with class like "a" ,"b" ,"c" but with different id's. 2. On button click I try to validate that only one of checkboxes is checked. 3. I know only checkbox classes(The common element)

My code:

$('#submit').click(function() {
    var matches = [];
    var items = document.getElementsByClassName('1'); //??? if the items is null?

    for (var i = 0; i < items.length; i++){
        matches.push({id:items[i].id, value:items[i].value});
    }

    if((matches[0].id != matches[1].id) &&(matches[0].value == matches[1].value))
        alert("ERROR!!!");
});

Please show me the best way to resolve that problem

"On button click I try to validate that only one of checkboxes is checked" — Why are you using checkboxes instead of radio buttons in the first place? — Quentin, Sep 07 '15 at 11:57
Why are you doing that instead of on form submit? There's often more than one way to submit a form. — Popnoodles, Sep 07 '15 at 12:00
Your question title states "validate checkboxes **on submit** button?" Do you mean on click of submit button? — NewToJS, Sep 07 '15 at 12:01
`getElementsByClassName('1');` classnames should not begin with numbers http://stackoverflow.com/a/449000/822711 Also since you're using jQuery what's wrong with selecting them using jQuery? — Popnoodles, Sep 07 '15 at 12:02

score 2 · Accepted Answer · edited May 23 '17 at 11:50

You're using jQuery. You want to use checkboxes with classname "1" almost as if they were radio buttons, and alert an error if more than one is checked. Your classname is invalid, and most likely you should be checking this on form submit instead, but here's the code you're looking for.

$('#submit').click(function() {
    if ($('.1:checked').length > 1) alert('error');
});

...And I imagine you would also want to stop the button from submitting the form in that case:

$('#submit').click(function(e) {
    if ($('.1:checked').length > 1) {
        e.preventDefault();
        alert('error');
    }
});

score 1 · Answer 2 · answered Sep 07 '15 at 12:56

See this code it may be help you!

<input type = "checkbox" class = "a ownClass" id = "one"></input>
<input type = "checkbox" class = "b ownClass" id = "two"></input>
<input type = "checkbox" class = "c ownClass" id = "three"></input>
<input type = "button" id = "submit" value = "submit"></input>


  (function(){
        $("#submit").click(function(){
        var checked = [];
        $(".ownClass").each(function(currIndex, val){
        if($(this).is(':checked')){
            checked.push(this.id);
        }

     })
    console.log(checked);
  });
}());

Thanks. But in my case @Popnoodles anserw is the best one :D — Adamo, Sep 07 '15 at 12:57

How to validate checkboxes on submit button?

2 Answers2