Chosen - required

[Bernd]

Moin,

weiß zufällig wie ich required auf Chosen https://harvesthq.github.io/chosen/options.html anwende?

<select name="test_id" id="test_id" data-placeholder="Bitte wählen..." class="chosen-select" required>

So funktioniert es leider nicht. Ich kann die Seite abschicken ohne etwas ausgefüllt haben zu müssen.

[pl]

Moin,

weiß zufällig wie ich required auf Chosen https://harvesthq.github.io/chosen/options.html anwende?

So wie die Beispiele vielleicht?

<select name="test_id" id="test_id" data-placeholder="Bitte wählen..." class="chosen-select" required>

So funktioniert es leider nicht.

Hast Du jQuery eingebunden?

Ich kann die Seite abschicken ohne etwas ausgefüllt haben zu müssen.

Prüfen muss man sowieso immer serverseitig.

MfG

[Bernd]

Moin,

So wie die Beispiele vielleicht?

<select name="test_id" id="test_id" data-placeholder="Bitte wählen..." class="chosen-select" required>

So funktioniert es leider nicht.

Hast Du jQuery eingebunden?

Selbstverständlich

Prüfen muss man sowieso immer serverseitig.

Dennoch ist es angenehmer wenn der User direkt eine Meldung bekommt ohne erst Daten durchs Netz schicken zu müssen.

[pl]

Moin,

Dennoch ist es angenehmer wenn der User direkt eine Meldung bekommt ohne erst Daten durchs Netz schicken zu müssen.

Wieso? Die Verbindung ist doch transparent. D.h. für den User ist sie technisch unsichtbar.

MfG

[Rolf B]

Hallo Bernd,

wenn ich mir die Beschreibung von Chosen ansehe, geht's da um die Gestaltung von Selects. Mit dem Submit des Form scheint das nichts zu tun zu haben.

Wie verhält sich das Form, wenn Du Chosen einfach mal auf das Select nicht anwendest? Mein Gefühl sagt mir nämlich, dass diese Required-Missachtung von Chosen unabhängig ist.

Für genauere Blicke auf das Problem wäre ein Link auf deine Seite hilfreich, oder auf ein Weblabor (jsfiddle, codepen &al.) in dem Du das Problem nachstellen kannst.

Rolf

[Bernd]

Moin,

hier ein Online Beispiel: https://jsfiddle.net/g069xaub/

Wenn du auf abschicken klickst passiert nichts.

UPDATE: Hier sieht man es noch besser: https://jsfiddle.net/g069xaub/1/

[Auge]

Hallo

hier ein Online Beispiel: https://jsfiddle.net/g069xaub/

Wenn du auf abschicken klickst passiert nichts.

UPDATE: Hier sieht man es noch besser: https://jsfiddle.net/g069xaub/1/

Browser Firefox 56.0.2 und 57:

Bei mir wird das Select mit einem roten Rand versehen und es erscheint ein Overlay mit dem Text „Bitte wählen Sie einen Eintrag in der Liste.“ bzw. beim leeren Input „Bitte füllen Sie dieses Feld aus.“. Und das wird ganz unabhängig davon angezeigt, ob die Felder der Klasse chosen-select angehören oder nicht.

Vivaldi 1.13 (Chromium Engine):

Für das leere Select wird in keiner Konstellation eine Meldung angezeigt, für das leere Input mit „Füllen Sie dieses Feld aus.“ schon.

Tschö, Auge

[Bernd]

Hallo,

danke für deinen Bericht

Vivaldi 1.13 (Chromium Engine): Für das leere Select wird in keiner Konstellation eine Meldung angezeigt, für das leere Input mit „Füllen Sie dieses Feld aus.“ schon.

das gleiche habe ich im aktuellen Google Chrome. Im aktuellen Edge habe ich für das leere Input eine rote Umrandung aber keine Meldung wie im Chrome

[Rolf B]

Hallo Bernd,

<div class="chosen-container chosen-container-single chosen-container-single-nosearch" title="" id="eintrag_chosen" style="width: 40%;"><a class="chosen-single chosen-default">
  <span>Bitte wählen...</span>
  <div><b></b></div>
</a>
<div class="chosen-drop">
  <div class="chosen-search">
    <input class="chosen-search-input" type="text" autocomplete="off" readonly="">
  </div>
  <ul class="chosen-results"></ul>
</div></div>

Erkennst Du das wieder? DAS macht .chosen aus deinem Select-Element. Ein Select-Element gar nicht mehr drin, statt ein selbstgemachtes Control, das den Select-Aufbau aus <input type="text"> und einer per Javascript gefüllten Liste nachbildet.

Chosen kennt required offenbar nicht. Der ausgewählte Wert steht nachher im span-Element, darauf gibt's kein required-Attribute.

Mein Fazit: Mit diesem Gewirr kannst Du keine constraint-Validation (also required und Co) durchführen. Schmeiß chosen weg, oder registriere Dich auf das submit-Event und prüfe von Hand. Die Anzeige mit den :valid-Selektoren wird dann aber immer noch schwer fallen (es sei denn, :valid ist auf div oder span erlaubt, das habe ich jetzt nicht geprüft).

Rolf

[Bernd]

Hallo,

vielen Dank für deine Erklärung. Mir geht es darum dass ich eine Suche in einem Select-Feld habe, da dieses sehr viele Einträge hat.

Kennst du vielleicht eine alternative?

[Auge]

Hallo

vielen Dank für deine Erklärung. Mir geht es darum dass ich eine Suche in einem Select-Feld habe, da dieses sehr viele Einträge hat.

Du willst die Eingabe auf eine Liste erlaubter Werte einschränken?

Kennst du vielleicht eine alternative?

Ein normales Input ((sehr) vermutlich type="search") mit Datalist. Die Datenliste kannst du bei eienr überschaubaren Anzahl von erlaubten Treffern vor der Auslieferung des Dokuments an den Browser einbauen (von vornherein höherer Traffic, schnell, weil alles da ist) oder dem Benutzer nach Eingabe von X Zeichen jeweils per Ajax/Fetch vom Server die passenden Werte nachladen (beim laden des Dokuments schneller, muss (immer wieder mal) Daten nachladen, kann somit **[edit]während der Eingabe träge/[/edit]**langsam sein).

Tschö, Auge

[Bernd]

Moin,

die Datalist hört sich sehr gut an. Hab mir das Beispiel angeschaut. Jetzt habe ich noch eine Frage. Bei Chosen konnte ich in der jQuery success: function(data) { } folgendes ausführen

$("#test_id").trigger("chosen:updated");

Damit konnte ich den gerade neu hinzugefügten Eintrag ohne Seiten-Reload am Ende anzeigen lassen. Ist dieses mit einer Datalist auch möglich?

[Auge]

Hallo

die Datalist hört sich sehr gut an. Hab mir das Beispiel angeschaut. Jetzt habe ich noch eine Frage. Bei Chosen konnte ich in der jQuery success: function(data) { } folgendes ausführen

$("#test_id").trigger("chosen:updated");

Damit konnte ich den gerade neu hinzugefügten Eintrag ohne Seiten-Reload am Ende anzeigen lassen. Ist dieses mit einer Datalist auch möglich?

Ich benutze jQuery selbst nicht und natives JavaScript kaum. Aber egal, ob die eine Bibliothek benutzt, die JS kapselt oder JS selbst, schlussendlich manipulierst du das DOM und fügst der Liste neue Elemente hinzu oder nimmst welche aus ihr heraus. Dass dir die Chosen-Bibliothek die Prüfung, welche Elemente das sein werden, vermutlich abnimmt, steht auf einem anderen Blatt.

Was diese Bibliothek macht und was du vermutlich mit der Datalist selbst machen müsstest, ist, …

• … nach Eingaben/Tastendrücken/Veränderungen die Eingabe zu prüfen und sie mit einer Liste erlaubter Werte zu vergleichen,
  • übertrage die Eingabe dazu an den Webserver, von wo eine Liste der zur Eingabe passenden möglichen Werte zurückgeliefert wird (Ajax, Fetch) oder
  • vergleiche die Eingabe mit einer bereits mit dem Dokument an den Browser übertragenen liste möglicher Werte
• … die in der Datalist enthaltenen Werte entsprechend dem Ergebnis der vorherigen Prüfung/des vorherigen Vergleichs anzupassen,
  • entferne nun nicht mehr enthaltene Elemente
  • füge neu hinzugekommene Elemente zur Liste hinzu

Tschö, Auge