Проблема с проверкой в ​​select2 множественный выбор - PullRequest
Новая
       6

Проблема с проверкой в ​​select2 множественный выбор

0 голосов
/ 09 июля 2020

Я пытаюсь проверить 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>

1 Ответ

0 голосов
/ 10 июля 2020

Ваша проблема связана с вашим логом таргетинга c. 

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

У вас нет ничего в DOM с этим классом. Скрытый элемент select имеет только класс sl.

Затем вы пытаетесь настроить таргетинг на элемент с идентификатором select2-" + elem.attr("id") + "-container", однако такой вещи не существует. Я установил jsFiddle, проверил DOM, и ID контейнера: s2id_singleselect.

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

Я также удалил много ненужного кода . Нет необходимости очищать фактическое сообщение или скрывать его с помощью CSS. Если вам не нужны сообщения об ошибках, не используйте обратный вызов errorPlacement для размещения сообщений; просто return false и сообщения пропали. 

errorPlacement: function() {
    return false;
},
...