Javascript 使用jQuery Validate并选择2进行验证不起作用

我有一个表格，里面有SELECT2

下面是示例图像的内容：

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

有两个问题：

如何修复SELECT2上的错误标签，使其与其他错误标签相同

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>

系统类型
--选择系统类型--
选择1
系统代码
描述

您只需使用本机的

select2

功能，即可查看所选选项的

更改

当您使用
jQuery
时，验证到
验证
选择输入，因此默认情况下
。选择
选项后，验证
不会隐藏标签

为了获得正确的
标签
，我们需要使用
全局变量
来存储标签元素，然后
在选择
选项时删除
标签

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


var mySelect2=$（“#系统类型”）
//启动选择
mySelect2.select2（）；
//select 2标签的全局变量
var select2label
$（“#systemrightsForm”）.validate({
规则：{
系统类型：{
必填项：true
},
系统代码：{
必填项：true
},
系统描述：{
必填项：true
}
},
信息：{
系统类型：{
必填项：“请选择系统类型”，
},
},
errorPlacement:函数（标签、元素）{
if（element.hasClass（'web-select2'））{
label.insertAfter（element.next（'.select2 container'））.addClass（'mt-2 text danger'）；
选择2Label=标签
}否则{
label.addClass（“mt-2文本危险”）；
标签。插入符（元素）；
}
},
亮点：功能（元素）{
$（element）.parent（）.addClass（'is-invalid'）
$（元素）.addClass（'form-control-danger'））
},
成功：功能（标签、元素）{
$（元素）.parent（）.removeClass（'is-invalid'）
$（元素）.removeClass（'form-control-danger'））
label.remove（）；
},
submitHandler:函数（表单）{
},
});
//查看select上的更改
mySelect2.on（“更改”，函数（e）{
选择2Label.remove（）；//删除标签
});

系统类型
--选择系统类型--
选择1
系统代码
描述
提交
您可以添加与该图像相关的完整HTML吗？@AlwaysHelping请查看我的更新question@AlwaysHelping我已经解决了第一个问题。唯一的问题是如何在select2更改其值时删除验证没有问题我现在已经为这两个选项添加了解决方案。一切正常。乐于帮助-快乐编码：）