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

Question

I have a list of multiple check boxes  The user can check all of them  but at least one should be checked to allow form submission  How can I enforce that requirement    lt p gt Box Set 1 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 1  required gt  lt label gt Box 1 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 2  required gt  lt label gt Box 2 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 3  required gt  lt label gt Box 3 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 4  required gt  lt label gt Box 4 lt  label gt  lt  li gt   lt  ul gt   lt p gt Box Set 2 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 5  required gt  lt label gt Box 5 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 6  required gt  lt label gt Box 6 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 7  required gt  lt label gt Box 7 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 8  required gt  lt label gt Box 8 lt  label gt  lt  li gt   lt  ul gt   lt p gt Box Set 3 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 9  required gt  lt label gt Box 9 lt  label gt  lt  li gt   lt  ul gt   lt p gt Box Set 4 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 10  required gt  lt label gt Box 10 lt  label gt  lt  li gt   lt  ul gt

User · Answer

lt ul gt       lt li gt  lt input class  quot checkboxes quot  name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 1 quot  required gt  lt label gt Box 1 lt  label gt  lt  li gt       lt li gt  lt input class  quot checkboxes quot  name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 2 quot  required gt  lt label gt Box 2 lt  label gt  lt  li gt       lt li gt  lt input class  quot checkboxes quot  name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 3 quot  required gt  lt label gt Box 3 lt  label gt  lt  li gt       lt li gt  lt input class  quot checkboxes quot  name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 4 quot  required gt  lt label gt Box 4 lt  label gt  lt  li gt   lt  ul gt    lt script type  quot text javascript quot  gt    document  ready function        var checkboxes       checkboxes        checkboxes change function            if     checkboxes checked   length gt 0                checkboxes removeAttr  required              else               checkboxes attr  required    required                           lt  script gt

User · Answer

For php  when you use checkboxes for multiple values  the name always ends with     We can use this to make the solution a bit more generic  And  since I put my error message in a data-message-value-missing attribute  I use   form on  change    input type checkbox  name   quot    quot     e   gt        const  inputs      input type checkbox  name  quot     e target name     quot          const  targetInp    inputs filter   data-message-value-missing         if  inputs filter   checked   length             targetInp removeAttr  required             form find  label error   html            else            targetInp attr  required    required               To make this work  set the data-message-value-missing and the required on only one  the last  input   lt ul gt      lt li gt  lt input name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 1 quot  gt  lt label gt Box 1 lt  label gt  lt  li gt      lt li gt  lt input name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 2 quot  gt  lt label gt Box 2 lt  label gt  lt  li gt      lt li gt  lt input name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 3 quot  gt  lt label gt Box 3 lt  label gt  lt  li gt      lt li gt  lt input name  quot BoxSelect   quot  type  quot checkbox quot  value  quot Box 4 quot  required data-message-value-missing  quot Select at least one quot  gt  lt label gt Box 4 lt  label gt  lt  li gt   lt  ul gt   I excluded the code to handle the checkValidity    etc  Seems beyond the scope of this question

User · Answer

Using this you can check at least one checkbox is selected or not in different checkbox groups or multiple checkboxes   Reference   Link   lt label class  control-label col-sm-4  gt Check Box 1 lt  label gt       lt input type  checkbox  name  checkbox1  id  checkbox1  value Male   gt  Male lt br   gt       lt input type  checkbox  name  checkbox1  id  checkbox1  value Female   gt  Female lt br   gt    lt label class  control-label col-sm-4  gt Check Box 2 lt  label gt       lt input type  checkbox  name  checkbox2  id  checkbox2  value ck1   gt  ck1 lt br   gt       lt input type  checkbox  name  checkbox2  id  checkbox2  value ck2   gt  ck2 lt br   gt    lt label class  control-label col-sm-4  gt Check Box 3 lt  label gt       lt input type  checkbox  name  checkbox3  id  checkbox3  value ck3   gt  ck3 lt br   gt       lt input type  checkbox  name  checkbox3  id  checkbox3  value ck4   gt  ck4 lt br   gt    lt script gt  function checkFormData         if      input name checkbox1  checked   length  gt  0            document getElementById  errMessage   innerHTML    Check Box 1 can not be null           return false            if      input name checkbox2  checked   length  gt  0            document getElementById  errMessage   innerHTML    Check Box 2 can not be null           return false            if      input name checkbox3  checked   length  gt  0            document getElementById  errMessage   innerHTML    Check Box 3 can not be null           return false            alert  Success        return true     lt  script gt

User · Answer

You can either do this on a PHP level or on a Javascript level  If you use Javascript  and or JQuery  you can check and validate if all the checkboxes are checked with a selector     Jquery also offers several validation libraries  Check out  http   jqueryvalidation org   The problem with using Javascript to validate is that it may be bypassed so it is wise to check on the server too    Example using PHP and assuming you are calling a PO   lt  php     if    GET  BoxSelect               Process your form here         Save to database  send email  redirect      else            Return an error and do not anything      echo  Checkbox is missing           exit         gt

User · Answer

The issue with the accepted solution above is that is does not allow for the else condition on form submit  if a box has been selected   thereby preventing form submission - at least when I tried it   I discovered another solution that effects the desired result more completely IMHO  here   Making sure at least one checkbox is checked  Code as follows   function valthis     var checkBoxes   document getElementsByClassName   myCheckBox     var isChecked   false      for  var i   0  i  lt  checkBoxes length  i              if   checkBoxes i  checked                 isChecked   true                        if   isChecked             alert   At least one checkbox checked                else               alert   Please  check at least one checkbox                       Fiddle  That code  amp  answer by Vell

User · Answer

Here s an example using jquery and your html    lt html gt   lt head gt        lt script src  http   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt   lt  head gt   lt body gt    lt script type  text javascript  gt    document  ready function              checkBtn   click function           checked      input type checkbox  checked   length         if  checked            alert  You must check at least one checkbox             return false                         lt  script gt    lt p gt Box Set 1 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 1  required gt  lt label gt Box 1 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 2  required gt  lt label gt Box 2 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 3  required gt  lt label gt Box 3 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 4  required gt  lt label gt Box 4 lt  label gt  lt  li gt   lt  ul gt   lt p gt Box Set 2 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 5  required gt  lt label gt Box 5 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 6  required gt  lt label gt Box 6 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 7  required gt  lt label gt Box 7 lt  label gt  lt  li gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 8  required gt  lt label gt Box 8 lt  label gt  lt  li gt   lt  ul gt   lt p gt Box Set 3 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 9  required gt  lt label gt Box 9 lt  label gt  lt  li gt   lt  ul gt   lt p gt Box Set 4 lt  p gt   lt ul gt      lt li gt  lt input name  BoxSelect    type  checkbox  value  Box 10  required gt  lt label gt Box 10 lt  label gt  lt  li gt   lt  ul gt    lt input type  button  value  Test Required  id  checkBtn  gt    lt  body gt   lt  html gt

User · Answer

Make all the checkboxes required and add a change listener  If any one checkbox is ticked  remove required attribute from all the checkboxes  Below is a sample code    lt div class  form-group browsers  gt       lt label class  control-label col-md-4  for  optiontext  gt Select an option lt  label gt       lt div class  col-md-6  gt           lt input type  checkbox  name  browser  value  Chrome  required  gt  Google Chrome lt br gt           lt input type  checkbox  name  browser  value  IE  required  gt  Internet Explorer lt br gt           lt input type  checkbox  name  browser  value  Mozilla  required  gt  Mozilla Firefox lt br gt           lt input type  checkbox  name  browser  value  Edge  required  gt  Microsoft Edge      lt  div gt   lt  div gt    Change listener      function        var requiredCheckboxes       browsers  checkbox required         requiredCheckboxes change function            if requiredCheckboxes is   checked                  requiredCheckboxes removeAttr  required              else               requiredCheckboxes attr  required    required

User · Answer

This should have what you need  check out the jsfiddle at the bottom     document  ready function          txt   val    input type checkbox  checked   length       txt2   val    input type checkbox    length       input type checkbox    change function      checked      input type checkbox  checked   length      block   show        block2   hide    if  checked  gt  0          block   hide          block2   show          txt   val checked

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

Examples related to html

Examples related to css

Examples related to validation

Examples related to checkbox