jQuery Validator在选择下拉列表上无法正常工作

如何解决jQuery Validator在选择下拉列表上无法正常工作

我正在尝试验证一个正在验证的下拉菜单，但当显示验证错误时其选项值也变为红色。图像颜色也显示为红色，但我不想更改其颜色。 / p>

columns: [
    {data: 'no'},{
        data: 'gambar_soal',full : 'soal_pg',render: function(data,full) { 
             if( data == null) {
                return data;
             } else { 
                 return full;
             }
          },defaultContent : data;

        }
    ]

解决方法

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

在jQuery

之后在您的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>