1

I am looking to JavaScript validate a form's checkboxes but I cannot get my code to throw the error message.

If the 3daypass radio button is chosen, 3 checkboxes in a certain section #matthewpeckham should be selected, etc. This is the code I have run onSubmit() :

function chooseDaysCorrect() {

var totalDaysChecked = 0;
var totalDaysChecked = $('#matthewpeckham').find("[type='checkbox']:checked").length;

if (document.getElementById('3daypass').checked && totalDaysChecked != 3) {
    alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
    return false;
}
else if (document.getElementById('2daypass').checked && totalDaysChecked != 2) {
    alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
    return false;
}
else if (document.getElementById('1daypass').checked && totalDaysChecked != 1) {
    alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
    return false;
}
else {
    return true;
}


}

Is ("[type='checkbox']:checked").length the correct method to count the number of checkboxes that have been chosen? Where have I gone wrong?

I have also tried the following way of running the function on form Submit, but this doesn't work either:

$(document).ready(function() {

$('#classic').submit(function() {

    var totalDaysChecked = 0;
    var totalDaysChecked = $('#matthewpeckham').find("[type='checkbox']:checked").length;

    if (document.getElementById('3daypass').checked && totalDaysChecked != 3) {
        alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
        return false;
    }
    else if (document.getElementById('2daypass').checked && totalDaysChecked != 2) {
        alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
        return false;
    }
    else if (document.getElementById('1daypass').checked && totalDaysChecked != 1) {
        alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
        return false;
    }
    else {
        return true;
    }

});

});
3
  • This way should work correctly. Did you try without the #matthewpeckham selector? Without the :checked?
    – Jon
    Jan 23, 2013 at 11:26
  • Also, HTML 4 does not permit id attributes to begin with a number, so 3daypass, 2daypass may be suspect. Did you try changing those?
    – Jon
    Jan 23, 2013 at 11:28
  • I have tried all these suggestions, but it still doesn't show the error. Other validation on the radio buttons works so it can't be the ID name. I have also tried onSubmit="chooseDaysCorrect();" and onSubmit="return chooseDaysCorrect();" in case it was that, but nothing either.
    – mpdc
    Jan 23, 2013 at 11:32

1 Answer 1

1

I would suggest the following code, first create your forms as usual, and to each checkbox add a custom data-* field with the required value to look for:

HTML:

<form class="classic" id="classic">
  <input type="checkbox" id="3daypass" data-expected="3" ></input>
  <input type="checkbox" id="2daypass" data-expected="2" ></input>
  <input type="checkbox" id="1daypass" data-expected="1" ></input>
  <input type="submit" value="click"></input>
</form>

$(document).ready(function() {

$("form#classic").submit(function() {

 totalDaysChecked = $("[type='checkbox']:checked").length
  $("[type='checkbox']:checked").each(function(index, value) {
        if($(value).attr('data-expected') != totalDaysChecked) {
          alert("Please select enough days for your chosen delegate pass from the CONFERENCE PASS section above");
        } else { 
          return true
        }
  });
return false; 

}) })

Try it here: http://jsbin.com/ipazow/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.