使用jQuery实现表单提交前验证：至少4个选项校验失效求助

你的代码存在3个核心问题导致验证失效，以下是修正方案及完整代码：

问题分析 #

1. 字段名语法错误：包含[]的字段名未用引号包裹，JS会解析出错
2. 验证规则误用：minlength是验证单个输入框的字符长度，无法统计选项数量
3. submitHandler语法错误：箭头函数后多余的分号导致语法异常

修改后的完整代码 #

JavaScript部分

// 初始化表单验证
$("#livechatform").validate({
  rules: {
    "options[]": {
      validateOptionCount: true
    }
  },
  messages: {
    "options[]": {
      validateOptionCount: "请至少填写4个选项"
    }
  },
  submitHandler: (form) => form.submit()
});

// 自定义验证规则：统计已填写的选项数量
$.validator.addMethod("validateOptionCount", function(_, element) {
  // 过滤出所有非空的options输入框
  const filledCount = $("input[name='options[]']").filter(function() {
    return $.trim(this.value) !== "";
  }).length;
  return filledCount >= 4;
});

HTML部分（含多个选项输入框示例）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<form class="custom-validation repeater" method="post" id="livechatform" enctype="multipart/form-data" action="/admin/poll/create">
  <!-- 示例选项输入框，可根据需求动态添加 -->
  <div class="col-10 mb-2">
    <input class="form-control" name="options[]" type="text">
  </div>
  <div class="col-10 mb-2">
    <input class="form-control" name="options[]" type="text">
  </div>
  <div class="col-10 mb-2">
    <input class="form-control" name="options[]" type="text">
  </div>
  <div class="col-10 mb-2">
    <input class="form-control" name="options[]" type="text">
  </div>
  <div class="col-10 mb-2">
    <input class="form-control" name="options[]" type="text">
  </div>

  <div class="d-flex flex-wrap gap-2 mt-3">
    <button type="submit" class="btn btn-primary waves-effect waves-light">
      Submit <span class="spinner-border spinner-border-sm"></span>
    </button>
    
    <button type="reset" class="btn btn-secondary waves-effect">
      Cancel
    </button>
  </div>
</form>

关键说明 #

• 自定义规则validateOptionCount会遍历所有options[]输入框，统计非空项的数量，只有当数量≥4时才通过验证
• 单个输入框无需设置required，允许用户留空，但整体必须满足至少4个填写项
• 若使用动态添加输入框的逻辑，该验证规则会自动适配新增的输入框

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