select2多选中的验证问题

Question

我正在尝试验证select2和他们正在验证的其他输入字段，如代码片段中所示，但我不想在验证错误时显示文本，相反，我想在select2周围和文本框周围显示红色边框，我也在错误放置和突出显示部分使用了它，但它在字段周围没有显示任何红色边框。

$("#singleselect").select2({ placeholder: "Please select",width: '100%'});
$.validator.messages.required = '';
$("form#msform").validate({
ignore:'input[type=hidden]',
rules:
{
"singleselect[]": { required: true },
name: { required: true }
},
errorPlacement: function (error, element) {
var elem = $(element);
if (elem.hasClass("select2-hidden-accessible")) {
element = $("#select2-" + elem.attr("id") + "-container").parent(); 
error.insertAfter(element);
} 
else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {

var elem = $(element);
if (elem.hasClass("select2-hidden-accessible")) {
$("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass); 
} 
else if(elem.is(':checkbox'))
{
elem.addClass("parent-error"); 

}
else {
elem.addClass(errorClass);
}
},
unhighlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-hidden-accessible")) {
$("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
}
else if(elem.is(':checkbox'))
{
elem.removeClass("parent-error"); 

}
else {
elem.removeClass(errorClass);
}
}, 
success: function (label, element) {
//jQuery(element).parent().removeClass('has-error');
},
submitHandler: function(form) {
form.submit();
}
});

span.error{
outline: 1px solid red;
border: 1px solid red;
}
.parent-error {
outline:1px solid red;
background:red;
}
#msform label.error {
display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<form action="#" id="msform" method="post" accept-charset="utf-8" novalidate="novalidate">
<select class="sl" id="singleselect" name="singleselect[]" multiple>
<option value="val1">Val-1</option>
<option value="val2">Val-2</option>
</select>
<input type="text" name="name" value="" id="name" maxlength="80" size="30" class="form-control error" autocomplete="off" placeholder="Name" aria-invalid="true">       

<input type="submit" name="register" value="Register" class="btn btn-primary">       
</form>

Answer 1

您的问题与目标逻辑有关。

if (elem.hasClass("select2-hidden-accessible")) 

该类在DOM中没有任何内容。隐藏的select元素只有一个类别sl。

然后，您正试图以ID为select2-" + elem.attr("id") + "-container"的元素为目标，但是，不存在这样的东西。我设置了一个jsFiddle，检查了DOM，容器的ID是s2id_singleselect。

https://jsfiddle.net/8ganq0mt/1/

我还删除了很多不必要的代码。不需要清空实际消息或使用CSS隐藏。如果您不想要错误消息，那么不要使用errorPlacement回调来放置消息；只有CCD_ 6和消息不见了。

errorPlacement: function() {
return false;
},