[Checkbox] change on list of checkboxes doesnt trigger revalidation

[davidchoo12]

I have a list of checkboxes which I need validation for at least 1 of the checkboxes is checked. I am using semantic ui with ASP.Net Core. Here is the generated checkboxes html

<div class="required grouped fields">
  <label>Payment options available</label>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" name="PaymentOptions" value="Cash">
      <label>Cash</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" name="PaymentOptions" value="Nets">
      <label>Nets</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" name="PaymentOptions" value="Visa">
      <label>Visa</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" name="PaymentOptions" value="Mastercard">
      <label>Mastercard</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" name="PaymentOptions" value="DinersClubInternational">
      <label>Diners Club International</label>
    </div>
  </div>
  <span class="field-validation-valid" data-valmsg-for="PaymentOptions" data-valmsg-replace="true"></span>
</div>

and here is the code I used to call the validation

$('input[name="PaymentOptions"]').on('change', function () {
  if ($('input[name="PaymentOptions"]:checked').length > 0)
    $('.field-validation-error[data-valmsg-for="PaymentOptions"]').empty();
});
$('#main-form').form({
  fields: {
    PaymentOptions: {
      identifier: 'PaymentOptions',
      rules: [
        {
          type: 'checked',
          prompt: 'Please select at least 1 payment option.'
        }]
    }
  },
  keyboardShortcuts: false,
  on: 'blur',
  onInvalid: function (prompt) {
    $('#main-form').validate().showErrors({ PaymentOptions: prompt });
    return false;
  },
  onSuccess: function () {
    $('.field-validation-error').empty();
    return true;
  }
});

The problem is after a round of validation and the checkboxes are in error: The checkbox list does not revalidate when the not the first checkbox is changed/checked. If the first checkbox is checked, it does revalidate and hide the errors: I expect that when any of the checkbox is checked, it should hide the errors like this:

I did some debugging on my own trying out different versions of semantic ui, and found out that the behaviour that I expected worked on version 2.1.8 and started breaking from 2.2 onwards. Here is a working sample on version 2.1.8: https://jsfiddle.net/ad4hdg3q/2/ and a breaking sample on version 2.2.10: https://jsfiddle.net/ad4hdg3q/3/

[aldebaran798]

Any suggestion for this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[lubber-de]

Fixed since Fomantic-UI 2.7.2 by https://github.com/fomantic/Fomantic-UI/pull/349 See your adjusted jsdiddle here https://jsfiddle.net/eu20r34L/