Chosen: Eine ausgewählte Eingabe zu einem Pflichtfeld machen

Erstellt am 14. Feb. 2012  ·  6Kommentare  ·  Quelle: harvesthq/chosen

Mein ursprüngliches Markup setzt die Auswahl auf ein required -Feld, aber Chosen scheint dem nicht zu entsprechen?

Hilfreichster Kommentar

Wenn Sie Chosen für alle select -Elemente verwenden, können Sie dieses CSS verwenden, um es sichtbar zu machen (für DOM), aber keine Deckkraft, keine Höhe, absolute Position.

Diese CSS-Selektoren zielen auf ungültige Auswahlelemente ab, wobei einer von ihnen auf multiple abzielt und ein 15px margin-top $ hinzufügt, um es auf die Mehrfachauswahlelemente zu zentrieren.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

Demo: http://jsfiddle.net/tripflex/2zdeu9oc/

Alle 6 Kommentare

@jbrooksuk hast du jemals eine Lösung dafür gefunden? jQuery Validate scheint es mir auch nicht zu erlauben, das Feld als Pflichtfeld zu erzwingen.

Ich habe einen Patch dazu, auf den in #515 verwiesen wird, und einen Pull-Request in #900.

Am Ende habe ich eine Hilfsfunktion geschrieben, die diese Überprüfung manuell für ausgewählte Elemente durchführt. Ich werde es morgen ausgraben, wenn ich es finden kann, obwohl in der Zwischenzeit die Lösung von @CaptainN gut aussieht :+1:

Dies ist ein Dupe von https://github.com/harvesthq/chosen/issues/515. Wir werden dort weitermachen. Danke.

515 ist technisch gesehen ein Dupe davon, aber ja, okay.

Wenn Sie Chosen für alle select -Elemente verwenden, können Sie dieses CSS verwenden, um es sichtbar zu machen (für DOM), aber keine Deckkraft, keine Höhe, absolute Position.

Diese CSS-Selektoren zielen auf ungültige Auswahlelemente ab, wobei einer von ihnen auf multiple abzielt und ein 15px margin-top $ hinzufügt, um es auf die Mehrfachauswahlelemente zu zentrieren.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

Demo: http://jsfiddle.net/tripflex/2zdeu9oc/

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen