Jquery Validator 在选择下拉列表中无法正常工作答案

【问题标题】：Jquery Validator not working properly on a select dropdownJquery Validator 在选择下拉列表中无法正常工作
【发布时间】：2020-09-16 05:44:24
【问题描述】：

我正在尝试验证它正在验证的下拉菜单，但是当显示验证错误时，它的选项值也会变成红色。就像图像中的颜色一样，颜色也显示为红色，但我不想更改它的颜色。

jQuery("#frm").validate({
            rules: {
                color: 'required',
                ...
            },

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
如何将颜色应用于错误消息？请也向我们展示该代码。
@AlwaysHelping：在我的情况下，当验证错误被触发时，错误类被附加到下拉列表中，这就是它变成红色的原因，你能给出解决方案吗？
jQuery Validate 插件仅适用/删除类。此验证插件不包含任何 CSS，因此样式/颜色的任何问题都完全取决于您的 CSS 规则。

标签： javascript jquery jquery-validate

【解决方案1】：

您需要在 jQuery 中使用 highlight 方法 validate 以确保 errorClass 也不会应用于 select 选项。

将此代码添加到您的jQuery validate 中messages

highlight: function(element, errorClass) {
   $(element).removeClass(errorClass); //prevent class to be added to selects
},

现场工作演示：

$('#frm').validate({
  errorClass: "my_error",
  rules: {
    color: 'required'
  },
  messages: {
    someSelect: "Required *"
  },
  highlight: function(element, errorClass) {
    $(element).removeClass(errorClass); //prevent class to be added to selects
  },
  submitHandler: function(form) {
    //do something
  }
});

.my_error {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<form id="frm">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" name="color">
      <option selected disabled>Choose</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

【讨论】：