使用jQuery Validate与Multiselect插件时，含[]的表单名触发语法错误

这个问题我之前做表单多选校验时也踩过坑！核心原因是jQuery Validate在生成校验相关的CSS选择器时，没有自动转义name属性里的方括号[]，而[]在jQuery的CSS选择器中是特殊字符（用于属性选择器语法），直接使用会导致选择器解析失败，也就是你看到的Syntax error, unrecognized expression报错。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：利用jQuery Validate内置方法转义特殊字符 #

jQuery Validate提供了$.validator.escapeCssSelector()方法，专门用来转义CSS选择器里的特殊字符（比如[]、.、#等）。你可以在初始化校验规则时，重写highlight、unhighlight和errorPlacement方法，手动处理转义：

// 初始化表单校验
$("#your-form-id").validate({
  // 针对带[]的name，规则里要把name用引号括起来
  rules: {
    "team[]": {
      required: true,
      minlength: 1 // 可选，限制最少选1项
    }
  },
  messages: {
    "team[]": {
      required: "请选择至少一个团队",
      minlength: "请选择至少一个团队"
    }
  },
  // 处理错误提示的位置
  errorPlacement: function(error, element) {
    // 转义元素name里的特殊字符
    var escapedName = $.validator.escapeCssSelector(element.attr("name"));
    // 找到对应的错误容器或者元素插入错误提示
    var errorContainer = $("#" + escapedName + "-error");
    if (errorContainer.length) {
      error.appendTo(errorContainer);
    } else {
      error.insertAfter(element);
    }
  },
  // 高亮错误元素时转义选择器
  highlight: function(element, errorClass, validClass) {
    var $elem = $(element);
    var escapedName = $.validator.escapeCssSelector($elem.attr("name"));
    $elem.addClass(errorClass).removeClass(validClass);
    // 同时高亮对应的label
    $elem.closest(".form-group").find("label[for='" + escapedName + "']").addClass(errorClass);
  },
  // 取消高亮时同理
  unhighlight: function(element, errorClass, validClass) {
    var $elem = $(element);
    var escapedName = $.validator.escapeCssSelector($elem.attr("name"));
    $elem.removeClass(errorClass).addClass(validClass);
    $elem.closest(".form-group").find("label[for='" + escapedName + "']").removeClass(errorClass);
  }
});

方案2：手动指定错误容器（最简单快捷） #

如果不想修改太多校验逻辑，可以给你的select元素手动添加一个不含[]的错误容器，然后让Validate直接把错误提示放到这个容器里：

修改HTML： #

<div class="form-group">
  <label class="col-sm-4 control-label" for="internal_team">Team <span class="input-required">*</span></label>
  <div class="col-sm-7">
    <select name="team[]" multiple="multiple" class="form-control" id="team-select">
      <!-- 你的选项内容 -->
    </select>
    <!-- 手动添加错误容器，id不含[] -->
    <div id="team-error" class="error-message"></div>
  </div>
</div>

初始化校验： #

$("#your-form-id").validate({
  rules: {
    "team[]": {
      required: true
    }
  },
  messages: {
    "team[]": {
      required: "请选择至少一个团队"
    }
  },
  // 直接把错误提示放到手动创建的容器里
  errorPlacement: function(error, element) {
    error.appendTo("#team-error");
  }
});

为什么会出现这个错误？ #

当你的select元素name是team[]时，jQuery Validate默认会生成类似label[for='team[]']、#team[]-error这样的选择器。但在jQuery的CSS选择器语法中，[]是用来表示属性选择器的（比如input[type='text']），直接写team[]会被当成不完整的选择器语法，从而抛出“无法识别的表达式”错误。只有把[]转义成\[\]，jQuery才能正确识别这是元素name的一部分。

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