0

I'm allowing the user to dynamically add checkboxes to a form. The user has the option to check or not. What's the easiest way to check that at least one box needs to stay unchecked using vee-validate?

<div class="checkbox col-xs-12 form-group" 
    :class="{'has-error': errors.has('check[' + index + '][check_exclude]')}">
  <div class="checkbox"">
    <label>
        <input type="checkbox" 
           v-model="item.check_exclude" 
           v-validate data-vv-rules="max_value:0" 
           data-vv-as="Check Exclude" 
           name="check_exclude" 
           :name="'check[' + index + '][check_exclude]'" 
           value="1">
    </label>
    <span 
      v-cloak 
      v-show="errors.has('check[' + index + '][check_exclude]')" class="help-block">
    {{ errors.first('check[' + index + '][check_exclude]') }}
        </span>
  </div>
</div>
user1040259
  • 6,369
  • 13
  • 44
  • 62
  • 1
    Your custom validator will enumerate all checkboxes and will do a logical AND of each `checkbox.checked` property - the result will be TRUE if **all** checkboxes are checked and FALSE if at least **one** checkbox is not checked. If you instead want to validate that ONLY 1 checkbox is not checked - then you need to do a SUM of all `checkbox.checked` (treating TRUE as 1, FALSE as 0) and compare this number to the count of checkboxes - if SUM + 1 == COUNT then exactly 1 checkbox is not checked. – IVO GELOV Aug 30 '18 at 08:17
  • @IVOGELOV perfect, thank you! I wrote a function how you mentioned and it's working perfectly. How do I evoke the validation error when sum == count? – user1040259 Aug 31 '18 at 03:18
  • I know this is long gone, but could you post the function you wrote? (as an answer) – nonNumericalFloat Jun 16 '21 at 18:22

0 Answers0