jquery validate check at least one checkbox

Question

I have something like this    lt form gt   lt input name  roles  type  checkbox  value  1    gt   lt input name  roles  type  checkbox  value  2    gt   lt input name  roles  type  checkbox  value  3    gt   lt input name  roles  type  checkbox  value  4    gt   lt input name  roles  type  checkbox  value  5    gt   lt input type  submit  value  submit    gt   lt form gt    I would like to validate that at least one checkbox  roles  should be checked  is it possible with jquery validate

User · Answer

Mmm first your id attributes must be unique, your code is likely to be

<form>
<input class='roles' name='roles' type='checkbox' value='1' />
<input class='roles' name='roles' type='checkbox' value='2' />
<input class='roles' name='roles' type='checkbox' value='3' />
<input class='roles' name='roles' type='checkbox' value='4' />
<input class='roles' name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
</form>

For your problem :

if($('.roles:checkbox:checked').length == 0)
  // no checkbox checked, do something...
else
  // at least one checkbox checked...

BUT, remember that a JavaScript form validation is only indicative, all validations MUST be done server-side.

User · Answer

sir neanderthal has already posted a nice answer   I just want to point out that if you would like to use different names for your inputs you can also use  or just copy the method  require from group method from official jQuery Validation additional-methods js  link to CDN for version 1 13 1

User · Answer

This is how I have dealt with it in the past       ready function                                                                   contact   validate           submitHandler  function form                   see if selectone is even being used             var boxes       selectone checkbox                if boxes length  gt  0                    if      selectone checkbox checked   length  lt  1                        alert  Please select at least one checkbox                        boxes 0  focus                        return false                                              form submit

User · Answer

idform   validate       rules                         roles                 required  true                        messages                         roles                 required   One Option please

User · Answer

Example from https   github com ffmike jquery-validate    lt label for  spam email  gt        lt input type  checkbox  class  checkbox  id  spam email  value  email  name  spam    validate  required true  minlength 2    gt  Spam via E-Mail  lt  label gt    lt label for  spam phone  gt        lt input type  checkbox  class  checkbox  id  spam phone  value  phone  name  spam      gt  Spam via Phone  lt  label gt    lt label for  spam mail  gt        lt input type  checkbox  class  checkbox  id  spam mail  value  mail  name  spam      gt  Spam via Mail  lt  label gt    lt label for  spam    class  error  gt Please select at least two types of spam  lt  label gt    The same without field  validate  in tags only using javascript       testform   validate        rules                  spam                            required  true                       minlength  1                             messages                  spam      Please select at least two types of spam                 And if you need different names for inputs  you can use somethig like this    lt input type  hidden  name  spam  id  spam   gt   lt label for  spam phone  gt       lt input type  checkbox  class  checkbox  id  spam phone  value  phone  name  spam phone    gt  Spam via Phone lt  label gt   lt label for  spam mail  gt       lt input type  checkbox  class  checkbox  id  spam mail  value  mail  name  spam mail    gt  Spam via Mail  lt  label gt    Javascript        testform   validate        rules             spam                 required  function  element                    var boxes       checkbox                    if  boxes filter   checked   length    0                        return true                                    return false                             minlength  1                         messages                 spam   Please select at least two types of spam                 I have added hidden input before inputs and setting it to  required  if there is no selected checkboxes

User · Answer

The validate plugin will only validate the current focused element Therefore you will need to add a custom rule to the validator to validate all the checkboxes  Similar to the answer above     validator addMethod  roles   function value  elem  param       return     roles checkbox checked   length  gt  0     You must select at least one       And on the element    lt input class   roles  true   name  roles  type  checkbox  value  1    gt    In addition  you will likely find the error message display  not quite sufficient   Only 1 checkbox is highlighted and only 1 message displayed  If you click another separate checkbox  which then returns a valid for the second checkbox  the original one is still marked as invalid  and the error message is still displayed  despite the form being valid  I have always resorted to just displaying and hiding the errors myself in this case The validator then only takes care of not submitting the form    The other option you have is to write a function that will change the value of a hidden input to be  valid  on the click of a checkbox and then attach the validation rule to the hidden element  This will only validate in the onSubmit event though  but will display and hide messages at the appropriate times  Those are about the only options that you can use with the validate plugin   Hope that helps

User · Answer

make sure the input-name   is in inverted commas in the ruleset   Took me hours to figure that part out       testform   validate     rules          name       required  true  minlength  1             read more here    http   docs jquery com Plugins Valid   ets 2C dots 29

User · Answer

if     input checkbox   filter   checked   length  lt  1           alert  quot Check at least one  quot     return false

User · Answer

It s highly probable that you want to have a text next to the checkbox  In that case  you can put the checkbox inside a label like I do below    lt label style  width  150px   gt  lt input type  checkbox  name  damageTypeItems  value  72  aria-required  true  class  error  gt  All Over lt  label gt   lt label style  width  150px   gt  lt input type  checkbox  name  damageTypeItems  value  73  aria-required  true  class  error  gt  All Over X2 lt  label gt    The problem is that when the error message is displayed  it s going to be inserted after the checkbox but before the text  making it unreadable  In order to fix that  I changed the error placement function   if  element is   checkbox          error insertAfter element parent   parent       else       error insertAfter element       It depends on your layout but what I did is to have a special error placement for checkbox controls  I get the parent of the checkbox  which is a label  and then I get the parent of it  which is a div in my case  This way  the error is placed below the list of checkbox controls

[javascript] jquery validate check at least one checkbox

Examples related to javascript

Examples related to jquery

Examples related to jquery-validate