Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Checkbox] change on list of checkboxes doesnt trigger revalidation #5380

Closed
davidchoo12 opened this issue May 17, 2017 · 3 comments
Closed

[Checkbox] change on list of checkboxes doesnt trigger revalidation #5380

davidchoo12 opened this issue May 17, 2017 · 3 comments

Comments

@davidchoo12
Copy link

@davidchoo12 davidchoo12 commented May 17, 2017

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:
image
The checkbox list does not revalidate when the not the first checkbox is changed/checked.
image
If the first checkbox is checked, it does revalidate and hide the errors:
image
I expect that when any of the checkbox is checked, it should hide the errors like this:
image

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/

@awgv awgv added the Enhancement label May 18, 2017
@awgv awgv added this to the Needs Milestone milestone May 18, 2017
@aldebaran798

This comment has been minimized.

Copy link

@aldebaran798 aldebaran798 commented Nov 18, 2017

Any suggestion for this?

@stale

This comment has been minimized.

Copy link

@stale stale bot commented Feb 23, 2018

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.

@stale stale bot added the stale label Feb 23, 2018
@stale stale bot closed this Mar 25, 2018
@lubber-de

This comment has been minimized.

Copy link

@lubber-de lubber-de commented May 9, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.