Validating Check Boxes in HTML

Using the HTML5 required attribute for a group of checkboxes?

Unfortunately HTML5 does not provide an out-of-the-box way to do that.

However, using jQuery, you can easily control if a checkbox group has at least one checked element.

Consider the following DOM snippet:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

You can use this expression:

$('div.checkbox-group.required :checkbox:checked').length > 0

which returns true if at least one element is checked.
Based on that, you can implement your validation check.

Validating check boxes in HTML

To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)

So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):

input[type="Submit"] {  display: none;}
input:checked ~ input[type="Submit"] {  display: inline;}

<input id="c1" type="checkbox"><label for="c1">First</label><br><input id="c2" type="checkbox"><label for="c2">Second</label><br><input id="c3" type="checkbox"><label for="c3">Third</label><br><input id="c4" type="checkbox"><label for="c4">Fourth</label><br><input type="Submit">

Simple JavaScript Checkbox Validation

You could use:

 if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    return false;
}

(demo page).

<input type="checkbox" name="checkbox" value="check"  />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}"  />

Returning false from an inline event handler will prevent the default action from taking place (in this case, submitting the form).
! is the Boolean NOT operator.
this is the submit button because it is the element the event handler is attached to.
.form is the form the submit button is in.
.checkbox is the control named "checkbox" in that form.
.checked is true if the checkbox is checked and false if the checkbox is unchecked.

Javascript Checkbox Validation not Checking if Ticked

  function checkCheckBoxes(theForm) {
     if ($("input[type='checkbox']:checked").length){
        return true;
     }else{
          alert ('You didn\'t choose any of the checkboxes!');
         return false;
     }
 }

How can I require at least one checkbox be checked before a form can be submitted?

Here's an example using jquery and your html.

<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function () {
    $('#checkBtn').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("You must check at least one checkbox.");
        return false;
      }

    });
});

</script>

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>

<input type="button" value="Test Required" id="checkBtn">

</body>
</html>

How to validate two check boxes and make sure that at least one is checked?

$("#frm_isuser").is(":checked") will return a bool that shows if $("#frm_isuser") is checked or not.

And checkValidity() is a DOM methods, so you should use document.getElementById("frm_isuser").checkValidity() or $("#frm_isuser")[0].checkValidity().

Edit: If one of the both checkboxes is checked, then set required attributes to false to both of them. If none of them is checked, set required to true.

$('.frm-Submit').on('submit', submitFrm);
var $checkbox = $('.custom-class')
$checkbox.on('change', function(){  var checked = false;    $checkbox.each(function(){    checked = checked || $(this).is(':checked')  })    $checkbox.prop('required', !checked)})
function submitFrm(e) {  e.preventDefault(); // Prevnts default form submit.    console.log('Submit form.')}

.form-group.required .control-label:after {  content: " *";  color: red;}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">  <div class="form-group required">    <label class="control-label" for="account"><span class="label label-primary">Account Type:</span></label>    <div class="checkbox">      <label for="user">         <input type="checkbox" name="frm_isuser" id="frm_isuser" data-toggle="collapse" data-target="#user-account" required class="custom-class"> <span class="label label-default">User</span>      </label>      <label for="staff">         <input type="checkbox" name="frm_isstaff" id="frm_isstaff" data-toggle="collapse" data-target="#staff-account" required class="custom-class"> <span class="label label-info">Staff</span>      </label>    </div>  </div>  <div class="row">    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>    </div>  </div></form>

HTML checkbox validation breaks when there are multiple checkboxes in the form

To ignore the checkbox you don't want to validate you need a way to ignore it in your validation, and you can do that by using the input field. Change the selector for your checkbox from $("input[type=checkbox]:checked") to $(".childModel").prev("input[type=checkbox]:checked")

Example:

$(document).ready(function() {  $('#checkModelBtn').click(function() {    var isCheckboxChecked = $(".childModel").prev("input[type=checkbox]:checked").length;    var isTextEntered = $("input.childModel").val().length;
    if (isTextEntered || !isCheckboxChecked) {      //alert("validation passed!");    } else {      alert("Please enter the Model Number");    }
  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>  <tr>    <td>      <p>        <h2>MODEL:</h2>      </p>      <input type="checkbox"> Model #      <input type="text" size="12" class="childModel">      <BR>    </td>
    <td>      THIS CHECKBOX BREAKS THE FUNCTIONALITY      <p>        <input type="checkbox" checked disabled> Some text here</td>  </tr></table>
<hr><input type="submit" name="submit" value="submit" id="checkModelBtn" />

Checkbox check event validate without Javascript?

Aside from the required attribute M. Kejji points out, which is the right way to do this, there's a CSS way as well:

It's possible to do this client-side within restrictions, sort of, but it's ugly. And it doesn't really prevent form submission, it just prevents showing the submit button.

Basically, you can use the CSS :checked pseudo-class and (say) an adjacent sibling combinator to hide the submit button if it's not checked:

.disable-submit + input[type=submit] {  display: none;}.disable-submit:checked + input[type=submit] {  display: inline;}

<p>Tick and untick the box</p><form>  <input type="checkbox" class="disable-submit">  <input type="submit" value="Send"></form>