Jquery 验证器在 select 下拉菜单中无法正常工作

Question

我正在尝试验证它正在验证的下拉菜单，但当验证错误为 shown.Like 时，它的选项值也变为红色，图像颜色也显示为红色，但我不想更改它的颜色。

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

Answer 1

您需要在 jQuery validate 中使用 highlight 方法以确保 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>

Jquery 验证器在 select 下拉菜单中无法正常工作

Jquery Validator not working properly on a select dropdown

javascript

jquery

jquery-validate