Menu icon Foundation
Foundation 6.1 Abide Checkbox Radio buttons

have been trying to make abide to check whether at least one checkbox or a radio button is selected.

I have been trying to use this codepen http://codepen.io/Akarienta/pen/xbXmJw?editors=101 but I am not sure what I am doing wrong.

In my app.js my code is as follows:

Foundation.Abide.defaults['validators']['checkbox_limit'] =
  function ($el, required, parent) {
    var group = parent.closest('.checkbox-group');
    var min = group.attr('data-abide-validator-min');
    var checked = group.find(':checked').length;
    if (checked >= min) {
      group.find('small.form-error').hide();
      return true;
    } else {
      group.find('small.form-error').css({
        display: 'block'
      });
      return false;
    }
  };

My HTML is something like this:

<form data-abide>
  <div class="row">
    <div class="small-12 column">
      <h4>Select your favourite vehicles</h4>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns checkbox-group" data-abide-validator-min="1">
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="car"/>
        car
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="train"/>
        train
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="bicycle"/>
        bicycle
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="ferry"/>
        ferry
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="plane"/>
        plane
      </label>
      <small class="form-error">You have to check at least one vehicle.</small>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <button class="button" type="submit">Submit</button>
    </div>
  </div>
</form>

Please let me know what I am doing wrong. Thanks!

Foundation6.1abideCheckboxradiobuttons

have been trying to make abide to check whether at least one checkbox or a radio button is selected.

I have been trying to use this codepen http://codepen.io/Akarienta/pen/xbXmJw?editors=101 but I am not sure what I am doing wrong.

In my app.js my code is as follows:

Foundation.Abide.defaults['validators']['checkbox_limit'] =
  function ($el, required, parent) {
    var group = parent.closest('.checkbox-group');
    var min = group.attr('data-abide-validator-min');
    var checked = group.find(':checked').length;
    if (checked >= min) {
      group.find('small.form-error').hide();
      return true;
    } else {
      group.find('small.form-error').css({
        display: 'block'
      });
      return false;
    }
  };

My HTML is something like this:

<form data-abide>
  <div class="row">
    <div class="small-12 column">
      <h4>Select your favourite vehicles</h4>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns checkbox-group" data-abide-validator-min="1">
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="car"/>
        car
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="train"/>
        train
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="bicycle"/>
        bicycle
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="ferry"/>
        ferry
      </label>
      <label>
        <input type="checkbox" data-abide-validator="checkbox_limit" value="plane"/>
        plane
      </label>
      <small class="form-error">You have to check at least one vehicle.</small>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <button class="button" type="submit">Submit</button>
    </div>
  </div>
</form>

Please let me know what I am doing wrong. Thanks!

This post has been closed. No new replies can be added.

Brian Tan over 3 years ago

For F6.1.1, change data-abide-validator to data-validator .

Tharaka De Silva over 3 years ago

Hey thanks this works. But I have an issue with this. If I click on the submit button, everything works and it highlights the incorrect fields. But, when I actually select one of the checkboxes only that checkbox turns back to the original font. All other checkboxes remain red. Is there a fix for this?

Brian Tan over 3 years ago

Update your validator:

     if (checked >= min) {
      // clear label highlight
      group.find('label').each(function() {
       $(this).removeClass('is-invalid-label');
      });
      // clear checkbox error 
      group.find(':checkbox').each(function() {
       $(this).removeClass('is-invalid-input').removeAttr('data-invalid');
      });
      group.find('small.form-error').hide();
      return true;
    } else {


Tharaka De Silva over 3 years ago

Thank you very much! It works! :D