Saya mencoba memvalidasi select2 dan bidang input lain yang mereka validasi seperti yang ditunjukkan pada cuplikan kode, tetapi saya tidak ingin menampilkan teks pada kesalahan validasi sebagai gantinya saya ingin menunjukkan batas merah di sekitar select2 dan kotak teks, saya telah menggunakannya juga dalam kesalahan penempatan dan sorot bagian tetapi tidak menunjukkan batas merah di sekitar bidang.

$("#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>
0
user3653474 9 Juli 2020, 11:50

1 menjawab

Jawaban Terbaik

Masalah Anda berkaitan dengan logika penargetan Anda.

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

Anda tidak memiliki apa pun di DOM dengan kelas itu. Elemen select yang tersembunyi hanya memiliki kelas sl.

Kemudian Anda mencoba menargetkan elemen dengan ID select2-" + elem.attr("id") + "-container", namun, hal seperti itu tidak ada. Saya menyiapkan jsFiddle, memeriksa DOM, dan ID wadahnya adalah s2id_singleselect.

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

Saya juga menghapus banyak kode yang tidak perlu. Tidak perlu mengosongkan pesan yang sebenarnya atau menyembunyikannya dengan CSS. Jika Anda tidak menginginkan pesan kesalahan, maka jangan gunakan panggilan balik errorPlacement untuk menempatkan pesan; hanya return false dan pesan hilang.

errorPlacement: function() {
    return false;
},
0
Sparky 10 Juli 2020, 16:34