使用formvalidation.io校验jQuery动态必填复选框失败求助

嘿，我碰到过好多次这种动态元素没法被formvalidation识别的问题，核心原因就是插件初始化的时候这些复选框还没生成呢，所以没把它们纳入验证范围。下面给你一步步解决的方案：

1. 生成复选框时添加上必要的属性 #

首先，你生成复选框的时候得给它们加name属性——formvalidation是靠name来识别字段的，另外可以先标记required属性（或者后面通过规则指定）。修改你的jQuery生成代码，示例如下：

// 假设你有一个唯一ID的变量someUniqueId，以及费用的value和label
$('<div />', { class: 'col-xl-12' })
  .append($('<div />', { 
    "class": "custom-control custom-control-info custom-checkbox", 
    "style": "display:inline-block; margin-right:15px;"
  })
  .append($('<input />', {
    "type": "checkbox",
    "class": "custom-control-input",
    "id": "fee_" + someUniqueId, // 给每个复选框加唯一ID，对应label的for属性
    "name": "requiredFees[]", // 用数组形式的name，方便批量处理
    "value": feeValue,
    "required": true // 标记为必填
  }))
  .append($('<label />', {
    "class": "custom-control-label",
    "for": "fee_" + someUniqueId,
    "text": feeLabel
  })))
.appendTo('#divRequiredFeeList'); // 别忘了把生成的元素添加到容器里

2. 动态添加后刷新formvalidation的验证规则 #

因为formvalidation初始化时只处理当时存在的DOM元素，所以你生成完复选框后，得手动告诉插件“我加了新元素，要把它们纳入验证”。有两种方式：

方式一：逐个注册新字段 #

如果是逐个生成复选框，可以在把元素添加到DOM后，立即调用addField方法：

// 先生成复选框元素
var $checkbox = $('<input />', {
  "type": "checkbox",
  "class": "custom-control-input",
  "id": "fee_" + someUniqueId,
  "name": "requiredFees[]",
  "value": feeValue,
  "required": true
});

// 添加到DOM结构后，注册到formvalidation
$checkbox.appendTo(/* 你的父容器 */);
$('#your-form-id').formValidation('addField', $checkbox, {
  validators: {
    notEmpty: {
      message: '请勾选这个必填选项'
    }
  }
});

方式二：批量刷新字段组 #

如果是一次性生成多个复选框，等所有元素都添加到DOM后，调用revalidateField刷新整个字段组：

// 所有复选框生成并添加到容器后执行
$('#your-form-id').formValidation('revalidateField', 'requiredFees[]');

3. 提前在formvalidation初始化中配置字段规则 #

你也可以在formvalidation初始化的时候，提前把动态字段的规则写好，这样插件在检测到元素出现时会自动应用规则（建议结合上面的刷新方法，确保万无一失）：

$('#your-form-id').formValidation({
  framework: 'bootstrap', // 换成你实际用的框架，比如foundation
  fields: {
    'requiredFees[]': {
      validators: {
        notEmpty: {
          message: '请勾选所有必填的费用选项'
        }
      }
    }
  }
});

4. 特殊情况：要求所有复选框都必须勾选 #

如果你的需求是所有动态生成的复选框都要勾选（而不是至少勾选一个），那默认的notEmpty验证器就不够用了，得自定义一个验证逻辑：

$('#your-form-id').formValidation({
  framework: 'bootstrap',
  fields: {
    'requiredFees[]': {
      validators: {
        callback: {
          message: '请勾选所有必填选项',
          callback: function(value, validator, $field) {
            // 获取所有name为requiredFees[]的复选框
            var $allCheckboxes = validator.getFieldElements('requiredFees[]');
            // 遍历检查每个是否都被勾选
            var allChecked = true;
            $allCheckboxes.each(function() {
              if (!$(this).is(':checked')) {
                allChecked = false;
                return false; // 跳出循环，不用再检查剩下的
              }
            });
            return allChecked;
          }
        }
      }
    }
  }
});

按照上面的步骤来，应该就能让formvalidation正确验证你动态生成的必填复选框啦！

内容的提问来源于stack exchange，提问作者Susan