Benutzerdefinierte Validierung in select2 anwenden

Question

Ich verwende Select2, die jetzt gut funktioniert. Ich möchte es überprüfen, dass sein Wert nicht leer sein kann. Ich möchte nicht jQuery validator plugin verwenden, weil es andere Felder auf dem Formular gibt, auch Code für die Validierung für das andere Feld des Formulars ist vor-geschrieben, ich wende nur select2 auf jedes Dropdown an. Ich habe für die Lösung im Netz versucht, aber jede Antwort verwendet jquery validator plugin.

Mein Code ist

$('.select2-use').select2({ 
     placeholder: "Select", 
     allowClear: true 
    }); 

<select id="type" name="type" class="form-control select2-use"> 
    <option value="">select type</option> 
    <option value="U">User</option> 
    <option value="A">Admin</option> 
</select> 

Meine aktuelle Validierung ist

if (type == '') { 
    $("#type").closest("span[class='select2-selection--single']").css('border-color','#a94442'); //which is not working 
    console.log($("#type").find('span.select2-selection--single')); 
    flag++; 
} else { 
    $('.select2-selection--single').css('border-color',''); 
} 

Wie kann ich die Rahmenfarbe von select2 Spanne als Fehler in rot.

Answer 1

Versuchen mit folgendem Code:

if (type == '') { 
    $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color','#a94442'); 
    console.log("match found"); 
    flag++; 
} else { 
    $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color',''); 
} 

Immer, wenn wir normalen dropdown zu select2 Dropdown konvertieren; dann erstellt dieses Plugin seine eigene DOM-Struktur und versteckt das Original dropdown. Das erzeugte DOM wird also direkt neben dem ursprünglichen dropdown platziert. Um mit seinem DOM umzugehen; Wir müssen $.next() verwenden, um als nächstes in DOM zu traversieren, und dann können wir jedes untergeordnete Element von $.find() übernehmen. Hoffe es wird dir helfen.

Answer 2

gelten Stil auf .select2-choice.

Folgendes ist der beste Weg, es zu tun.

die folgende CSS-Klasse hinzufügen:

.select2-container .select2-choice { 
     border: 1px solid transparent !important; 
     box-shadow: none; 
     border-radius: 0; 
    } 
    .select2-container .select2-choice.show-error { 
     border: 1px solid #EC644B !important; 
    } 

Auf Fehlerzustand dies tun.

jQuery("#yourtargetselect2 .select2-choice").addClass("show-error");

mit Ihrem Code wäre es

if (type == '') { 
    $("#type").closest(".select2-choice").css('border-color','#a94442'); //which is not working 
    flag++; 
} else { 
    $('.select2-choice').css('border-color',''); 
} 

sein