Custom validator with multiple checkboxes has erratic behavior

[MatiasSM]

I've implemented a custom validator to be able to verify that at least one of many checkboxes is selected. However, sometimes when checking and un-checking the checkboxes, the submit button still appears as disabled and some other times, the checkboxes are still marked as with error (in red).

I was able to reproduce the issue in the following JS Bin: http://jsbin.com/litalocovi/1/edit?html,js,output

A sequence that seems to fail is:

1. Check F1
2. Un-check F1
3. Check F2

We would expect that, in this case, the validation would be correct and the submit button is enabled, but it seems to fail (neither of those happen). The problem may be in the custom validator but I can not spot any error and it is a really simple piece of code.

Any clue?

[1000hz]

.form-group elements can only contain a single input element. Move each checkbox to its own .form-group

[1000hz]

According to Bootstrap, it seems as though checkboxes don't belong in a .form-group at all, but rather a .checkbox container. I'll extend the plugin to check for that as well as .form-group.

[MatiasSM]

Ok, thank you for your feedback. I will investigate further about the correct way of grouping checkboxes. Until now I treated this case (many checkboxes representing a unique group) as if they were radiobuttons, that's why I implemented it that way.

I stay tuned for the new .checkbox container support. Thank you for your prompt response!

[MatiasSM]

Do you know any workaround I can apply for a use case like mine? (that is, validate at least one checkbox in a group is selected)

[1000hz]

You'll need to get rid of the parent .form-group div and add a form-group class to each individual .checkbox div. This will screw up the styles a little, so you'll need to apply a margin-bottom to .form-group.checkbox:last-child.

Then to add the validator:

$('[data-toggle="validator"]').validator({
  custom: {
    chkgrp: function ($el) {
      var name = $el.data('chkgrp')
      var $checkboxes = $el.closest('form').find('input[name="' + name + '"]')

      return $checkboxes.is(':checked')
    }
  },
  errors: {
    chkgrp: 'Need at least one checked'
  }
}).on('change.bs.validator', '[data-chkgrp]', function (e) {
  var $el  = $(e.target)
  var name = $el.data('chkgrp')
  var $checkboxes = $el.closest('form').find('input[name="' + name + '"]')

  $checkboxes.not(':checked').trigger('input')
})

[MatiasSM]

Thank you very much for your feedback!

[1000hz]

So investigating this further, it seems as though no change to the plugin is needed.

Ignore what I said about adding the form-group class to each .checkbox. You should put all the checkboxes in a single .form-group container. Using the custom validator code I gave you above should do the trick.

[MatiasSM]

Thank you for the help, I finally got my code working.

[mwitzmann]

I have the same problem and tried the solution which you have provided, but it doesn't work for me: http://jsbin.com/tefipazace/2/edit?html,js,output

[MatiasSM]

you have marked all your checkboxes as required. Also you need a form-group for each checkbox. Here is a working example: http://jsbin.com/xosabirowu/1/edit?html,js,output

[mwitzmann]

Oh sorry, you are right. "required" was the problem. Now it works. Thank you.

[brandomr]

@1000hz, @MatiasSM any tips on how to get the submit button to show disabled on load (prior to any checkbox selection)?

[maximelebreton]

@1000hz your solution works in 0.9.0 but doesn't in 0.10.2: https://github.com/1000hz/bootstrap-validator/issues/96#issuecomment-87521676 any ideas?

[maximelebreton]

@1000hz here is a jsbin.com/resivujore with your https://github.com/1000hz/bootstrap-validator/issues/96#issuecomment-87521676 code on 0.10.2 version if you have time to look. thanks!

[maximelebreton]

@1000hz updated example with 0.11.5 jsbin.com/jinagorole

[1000hz]

Some changes to the validator plugin are preventing this from working. I suggest you stick with v0.9.0 until I can push out some changes to support this use case.

[VirtualBoost]

Any updates regarding this coming up? I would love to have the newest version of the validator but this bug is holding me back at 0.9.0 :/

[maximelebreton]

+1

[mordekasg]

+1