Form Validation - Multiple checkboxes

Question

I need to ensure that if at least one checkbox (of many) is not ticked, the form wont submit, this is what I have at the moment, I thought it should work:

<script type="text/javascript">
function valthis() {
 var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
 var isChecked = false;
 for (var i = 0; i < checkBoxes.length; i++) {
    if ( checkBoxes[i].checked ) {
        isChecked = true;
    };
    };
    if ( !isChecked ) {

    alert( 'Please, check at least one checkbox!' );
    return false;
    }   
   }

</script>

I would appreciate any help I can get!!!

regards, Mason.

So your code isn't working. What does that mean? Is an exception being thrown? — johnnyRose
– johnnyRose, Commented Aug 20, 2015 at 23:39
How is the form being submitted, is there a submit button? When is valthis being called? What does "I thought it should work" mean? Does the form always submit? Never submit? Throw errors? …? — RobG
– RobG, Commented Aug 20, 2015 at 23:51

alcfeoh · Accepted Answer · 2015-08-20 23:27:25Z

1

This looks good but you to call valthis() before submitting the form, which you would do "manually" in your code after validating that everything is OK.

Basically, this means that you have a basic button (not a "submit" one) that actually calls valthis:

<input type="button" onClick="valthis()" ></input>

Then at the end of valthis():

document.getElementById("myForm").submit();

answered Aug 20, 2015 at 23:27

alcfeoh

2,2871 gold badge20 silver badges35 bronze badges

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

3 Comments

RobG Over a year ago

There is no closing tag for input elements. The button should be a submit button, the listener should be on the form's submit handler and there is no need to call form.submit.

alcfeoh Over a year ago

I disagree. If there is a form submit action, using a submit button will skip validation.

RobG Over a year ago

No, it will not. It's the most recommended way to apply form validation, a primary reason being that forms can be submitted without clicking a button of any kind.

RobG · Accepted Answer · 2015-08-21 00:06:29Z

You have not provided much detail about your actual problem so it's impossible to say exactly what is going wrong.

This is what you should have, whether it's what you actually have is moot. There should be a submit listener on the form:

<form onsubmit="return valthis(this)" ... >

There should be a submit button in the form:

<input type="submit">

or

<button>Submit</button>

The submit listener should return false to cancel submission, or any other value to not cancel. The function should have a more meaningful name, say "checkCheckboxes", and the loop can return as soon as a checked checkbox is found:

function valthis() {

  var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
  var isChecked = false;

  // Break from loop if isChecked is true
  for (var i = 0; i < checkBoxes.length && !isChecked; i++) {
    isChecked = checkBoxes[i].checked;
  }

  return isChecked;
}

There is no need for a semicolon after a block, it will represent an empty statement (nothing harmful, just redundant).

If you could guarantee support for modern APIs, then:

<form onsubmit="return this.querySelectorAll('input[type=checkbox]:checked').length > 0;" ...>

would do.

Collectives™ on Stack Overflow

Form Validation - Multiple checkboxes

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