select2 多个 select 中的验证问题

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 中没有任何内容 class。隐藏的 select 元素只有 class 个 sl.

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

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

我还删除了很多不必要的代码。无需清空实际消息或使用 CSS 隐藏。如果您不想要错误消息，则不要使用 errorPlacement 回调来放置消息；只是 return false，消息消失了。

errorPlacement: function() {
    return false;
},

select2 多个 select 中的验证问题

Validation issue in select2 multiple select

html

javascript

jquery

jquery-validate