使用带有 Select2 的 jQuery Validate 进行验证不起作用

Question

我有一个包含 SELECT2 的表单。

这是示例图片：

正如您在图像上看到的，错误标签与其他错误标签不同。

有两个问题：

1. 如何修复 SELECT2 上的错误标签以使其与其他错误标签相同？
2. 当 SELECT2 更改其值时，如何添加或删除验证？ （抱歉，我是 SELECT2 的新手）

这是我验证表单的代码：

$("#systemcodeForm").validate({
    submitHandler: function (form) {
      
  },
  rules: {
    systemtype: {
      required: true         
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    }
  },
  errorPlacement: function(label, element) {
    if(element.hasClass('web-select2') && element.next('.select2-container').length) {
      label.insertAfter(element.next('.select2-container'));
    }
    else{
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('has-danger')
    $(element).addClass('form-control-danger')
  },
  success: function(label,element) {
    $(element).parent().removeClass('has-danger')
    $(element).removeClass('form-control-danger')
    label.remove();
  }
});

这是我的 HTML 代码：

<form class="cmxform" id="systemrightsForm" method="post" action="#">
 <div class="row">
   <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
            <option value="">-- SELECT SYSTEM TYPE --</option>
            <option value="1">Option 1</option>
        </select>
      </div>
    </div>
</div>
<div class="row">
   <div class="col-md-12">
    <div class="form-group">
      <label class="control-label" for="systemcode">System Code</label>
      <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autocomplete="off" maxlength="15">
     </div>
   </div>
</div>
<div class="row">
  <div class="col-md-12">
   <div class="form-group">
     <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autocomplete="off" maxlength="40">
    </div>
  </div>
</div>
</form>

Answer 1

您可以简单地使用本机 select2 change 函数来监视您选择的选项选择上的 change。

当您使用jQuery .validate 到validate 时选择输入，因此默认情况下.validate 不会在选择option 后隐藏标签。

为了获得正确的label，我们需要使用global variable 来存储标签元素，然后在选择option 时使用remove 即label。

现场工作演示：（两个问题都已解决）

var mySelect2 = $('#systemtype')

//initiate select
mySelect2.select2();

//global var for select 2 label
var select2label

$("#systemrightsForm").validate({

  rules: {
    systemtype: {
      required: true
    },
    systemcode: {
      required: true
    },
    systemdesc: {
      required: true
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    },

  },
  errorPlacement: function(label, element) {
    if (element.hasClass('web-select2')) {
      label.insertAfter(element.next('.select2-container')).addClass('mt-2 text-danger');
      select2label = label
    } else {
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('is-invalid')
    $(element).addClass('form-control-danger')
  },
  success: function(label, element) {
    $(element).parent().removeClass('is-invalid')
    $(element).removeClass('form-control-danger')
    label.remove();
  },
  submitHandler: function(form) {

  },
});

//watch the change on select
mySelect2.on("change", function(e) {
  select2label.remove(); //remove label
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.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 class="cmxform" id="systemrightsForm">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
          <option value="">-- SELECT SYSTEM TYPE --</option>
          <option value="1">Option 1</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label" for="systemcode">System Code</label>
        <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autocomplete="off" maxlength="15">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autocomplete="off" maxlength="40">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>

</form>