zurb-foundation - 如果复选框组中没有选中复选框，则显示错误

Question

当在同一个复选框组中未选中任何复选框时，如何使用 Foundation 5 的 Abide HTML5 表单验证库显示错误消息？

Answer 1

你必须编写自己的 abide 验证器，但这很简单。

工作示例：CodePen 链接

JavaScript

$(document).foundation({
    abide: {
        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.error').hide();
                    return true;
                } else {
                    group.find('small.error').css({
                        display: 'block'
                    });
                    return false;
                }
            }
        }
    }
});

HTML

<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="error">You have to check at least one vehicle.</small>
      </div>
   </div>
   <div class="row">
      <div class="small-12 columns">
         <button type="submit">Submit</button>
      </div>
   </div>
</form>