Checkbox Group - Validation Not Working

[chris-scholl]

When validating a checkbox group the documentation reads:
Validate qty of checkboxes in a group (same name) have been checked, using min, max or range. Only the first checkbox element in the group needs to have the validation attributes added.

If the validation attributes are not on ALL checkboxes the validation fails.

Here is an example of the behavior, the validation works when checking and unchecking the first checkbox. When you try to check and uncheck any other checkbox in the group, the validation does not occur.

https://codepen.io/chris-scholl/details/eWmOpg

I was adding the validation attributes to all checkboxes as a work-around but this causes the form to slow down and lock up the browser for 5-30 seconds at a time.

Thank you for such an awesome tool. I use JQuery Form Validator everywhere.

[victorjonsson]

There are several problems with your code example.

1. You have the following callback in your setup

onValidate : function($form) {
      return {
        element : $('#some-input'),
        message : 'This input has an invalid value for some reason'
      }
    }

Which means that every time the validation occurs, you tell the plugin that element #some-input has an invalid value and the submit button is therefore kept disabled.

2. Another problem is that you disable the submit button once it's clicked and then manually submit the native form element. This simply won't work. If you want to disable the button while the form is being processed you need to do that in a callback, you also need to enable the button if the validation fails. Something like:

$('form').on('submit', function () {
  $(this).find('[submit]').attr('disabled', 'disabled');
});
$.validate({
   onError: function($form) {
      $form.find('[submit]').removeAttr('disabled');
   }
});

[chris-scholl]

Thanks for getting to this Victor. I've updated the JS, removing all of the callbacks (they were not necessary, just to show there was no validation activity in certain situations).

The main issue is that the validation only occurs on the checkbox array when the first checkbox is checked or unchecked.

One example is this:

1. check the first checkbox
2. check the second checkbox
3. uncheck the first checkbox
4. unchecking the second checkbox does not appear to remove the valid (green) state on the checkbox array

Another example is just checking any box other than the first, nothing appears to happen.

Thank you for taking the time to look into this issue.