Select Auswahlliste Prüfen

[Jnnbo]

Moin,

eine Frage, kann ich dieses Feld mit HTML5 prüfen ob etwas ausgewählt ist? value="0" soll als nicht ausgefüllt gewertet werden.

  <label for="test">Test</label>
  <select name="test" id="test">
    <option value="0">-- Bitte wählen</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
  </select>

[Gunnar Bittersmann]

@@Jnnbo

eine Frage, kann ich dieses Feld mit HTML5 prüfen ob etwas ausgewählt ist? value="0" soll als nicht ausgefüllt gewertet werden.

„Nicht ausgefüllt“ heißt kein Wert, nicht Wert 0. Also nicht value="0", sondern gar kein value-Attribut.

Nun soll das select-Feld beim Absenden aber einen Wert haben, also required-Attribut setzen.

Der Fall ist übrigens in der Spec beim select-Element aufgeführt. Kuckst du nach „When there is no default option, a placeholder can be used instead“.

LLAP

[Jnnbo]

Hallo Gunnar,

„Nicht ausgefüllt“ heißt kein Wert, nicht Wert 0. Also nicht value="0", sondern gar kein value-Attribut.

Nun soll das select-Feld beim Absenden aber einen Wert haben, also required-Attribut setzen.

Ok, habe ich geändert

<form name="form1" method="post" action="">
    <label for="test">Test</label>
    <select name="test" id="test" required>
      <option>-- Bitte wählen</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
    </select>
    <input type="submit" name="senden" id="senden" value="Senden">
</form>

Führe ich dieses Beispiel nun aus, kommt kein Hinweis, dass das Feld ein Pflichtfelder ist, wie ich es von anderen Feldern gewohnt bin.

Der Fall ist übrigens in der Spec beim select-Element aufgeführt. Kuckst du nach „When there is no default option, a placeholder can be used instead“.

Mache ich es so, wie es in der Doku steht, dann kommt auch das Feld wieder, das ich im ersten Beispiel vermisst habe

<form name="form1" method="post" action="">
    <label for="test">Test</label>
    <select name="test" id="test" required>
      <option value="">-- Bitte wählen</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
    </select>
    <input type="submit" name="senden" id="senden" value="Senden">
</form>

Also kann ich "value" nicht einfach komplett weg lassen, wie du es mir vorgeschlagen hast.

[Gunnar Bittersmann]

@@Jnnbo

Führe ich dieses Beispiel nun aus, kommt kein Hinweis, dass das Feld ein Pflichtfelder ist, wie ich es von anderen Feldern gewohnt bin.
[…]
Mache ich es so, wie es in der Doku steht, dann kommt auch das Feld wieder, das ich im ersten Beispiel vermisst habe
[…]
Also kann ich "value" nicht einfach komplett weg lassen, wie du es mir vorgeschlagen hast.

Wer lesen kann, ist klar im Vorteil.

Gut, dass du es kannst.

Natürlich muss value="" gesetzt werden, sonst wird als Wert des option-Elements der Elementinhalt genommen.

LLAP

[Jnnbo]

Hallo Gunnar,

Wer lesen kann, ist klar im Vorteil. Gut, dass du es kannst.

Natürlich muss value="" gesetzt werden, sonst wird als Wert des option-Elements der Elementinhalt genommen.

weißt du zufällig ob es möglich ist, die Meldungen die der Browser mit anzeigt zu ändern? Es steht derzeit "Wählen Sie ein Element in der Liste aus" Ich möchte gerne "Wählen Sie bitte einen Hersteller aus" stehen haben. Ist dieses möglich?

[Der Martin]

Hi,

weißt du zufällig ob es möglich ist, die Meldungen die der Browser mit anzeigt zu ändern?

meinst du die Fehlermeldung für den Fall, dass nichts ausgewählt wurde?
Nein, die kannst du ebensowenig ändern wie Text und Gestaltung anderer Browser-Fehlermeldungen.

Es steht derzeit "Wählen Sie ein Element in der Liste aus" Ich möchte gerne "Wählen Sie bitte einen Hersteller aus" stehen haben. Ist dieses möglich?

Nein. Dieser Text ist im Browser "fest verdrahtet".

So long,
 Martin

[Jnnbo]

Hallo Der,

Nein. Dieser Text ist im Browser "fest verdrahtet".

schade. Aber ok, dann habe ich schon weniger arbeiten :)

[Gunnar Bittersmann]

@@Jnnbo

Nein. Dieser Text ist im Browser "fest verdrahtet". schade.

Zu früh geärgert.

Aber ok, dann habe ich schon weniger arbeiten :)

Zu früh gefreut.

LLAP

PS: Etwas später geworden, aber meine Antwort hast du gesehen?

[dedlfix]

Tach!

Es steht derzeit "Wählen Sie ein Element in der Liste aus" Ich möchte gerne "Wählen Sie bitte einen Hersteller aus" stehen haben. Ist dieses möglich?

Nein. Dieser Text ist im Browser "fest verdrahtet".

Man muss nur Javascript zulassen, dann geht das: http://demosthenes.info/blog/697/Customizing-HTML5-Form-Error-Messages-With-JavaScript

dedlfix.

[Der Martin]

Hallo,

Es steht derzeit "Wählen Sie ein Element in der Liste aus" Ich möchte gerne "Wählen Sie bitte einen Hersteller aus" stehen haben. Ist dieses möglich?

Nein. Dieser Text ist im Browser "fest verdrahtet".

Man muss nur Javascript zulassen, dann geht das: http://demosthenes.info/blog/697/Customizing-HTML5-Form-Error-Messages-With-JavaScript

cool, das wusste ich auch noch nicht.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

meinst du die Fehlermeldung für den Fall, dass nichts ausgewählt wurde?
Nein, die kannst du ebensowenig ändern wie Text und Gestaltung anderer Browser-Fehlermeldungen.

Wirklich nicht?

Nein. Dieser Text ist im Browser "fest verdrahtet".

Wirklich?

LLAP

[Christian Kruse]

Hallo Jnnbo,

weißt du zufällig ob es möglich ist, die Meldungen die der Browser mit anzeigt zu ändern? Es steht derzeit "Wählen Sie ein Element in der Liste aus" Ich möchte gerne "Wählen Sie bitte einen Hersteller aus" stehen haben. Ist dieses möglich?

Dass das nicht geht hat dir ja schon Martin gesagt. Darüber hinaus gibt es aber jQuery.validate, bei dem die HTML5-Attribute zwar genutzt werden aber die Browser-eigene Validierung umgangen wird. Dort kannst du dann auch eigene Meldungen verfassen.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

weißt du zufällig ob es möglich ist, die Meldungen die der Browser mit anzeigt zu ändern? Dass das nicht geht hat dir ja schon Martin gesagt.

Dass das (in einigen Browsern) doch geht, hat dir ja schon Gunnar gesagt.

Darüber hinaus gibt es aber jQuery.validate

jQuery, meh.

Es gibt auch das HTML5-Constraint-Validation-API. Und einen Artikel dazu.

LLAP

[Christian Kruse]

Hallo Gunnar,

Darüber hinaus gibt es aber jQuery.validate

jQuery, meh.

Diese "avoid jQuery"-Bewegung halte ich für extrem kurzsichtig. Es hat seine Gründe, dass jQuery entwickelt wurde. Als jemand, der noch mit IE<=4 und NN<=4 gekämpft hat fehlt mir da jedes Verständnis.

Es gibt auch das HTML5-Constraint-Validation-API. Und einen Artikel dazu.

Der richtige Weg ist dann natürlich Unterstützung für diese API in das Plugin einzubauen und transparent einen Fallback zu nutzen.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Diese "avoid jQuery"-Bewegung halte ich für extrem kurzsichtig.

Ich sag auch nicht „avoid jQuery at all costs“.

Eher „wäge die Kosten ab“. Was bringt der Einsatz von jQuery? Und was bezahlt man dafür?

Es hat seine Gründe, dass jQuery entwickelt wurde.

Natürlich. Es hat auch seine Gründe, warum etliche Dinge aus jQuery in JavaScript eingeflossen sind.

Und weil es querySelectorAll() und classList jetzt in JavaScript gibt, fallen einige Gründe für den Einsatz von jQuery weg.

Als jemand, der noch mit IE<=4 und NN<=4 gekämpft hat fehlt mir da jedes Verständnis.

Zum Glück sind heutige Browser deutlich näher am Standard und damit aneinander.

Und um die anderen muss man sich kaum noch scheren. Besonders, wenn man auf progessive enhancement setzt.

LLAP

[Christian Kruse]

Hallo Gunnar,

Und weil es querySelectorAll() und classList jetzt in JavaScript gibt, fallen einige Gründe für den Einsatz von jQuery weg.

Das sehe ich anders. Mal abgesehen davon, dass die Unterstützung inkonsistent ist zwischen verschiedenen Browsern und verschiedenen Versionen davon.

Als jemand, der noch mit IE<=4 und NN<=4 gekämpft hat fehlt mir da jedes Verständnis.

Zum Glück sind heutige Browser deutlich näher am Standard und damit aneinander.

Das ist im Prinzip richtig, aber Browser-Bugs und Versionsunterschiede gibt es auch heute noch. Und gerade Versionsunterschiede sind relevanter denn je.

Und um die anderen muss man sich kaum noch scheren. Besonders, wenn man auf progessive enhancement setzt.

Diese Einstellung ist praxisfern, denn sie setzt voraus, dass sich verschieden Features in verschiedenen Browserversionen gleich verhalten. Und dass User es hinnehmen, wenn in $corp eingesetzte Browser ein Feature nicht bekommt.

Ein super Beispiel ist hier input type="datetime-local". Mit progressive enhancement würden User mit Browsern, die das nicht unterstützen, ein Textfeld bekommen, mit dem Datum so formatiert wie es der HTML5-Standard vorsieht. Das nimmt mir kein Kunde ab.

Noch schlimmer wäre der Einsatz von input type="datetime": hier muss das Datum in UTC eingetragen werden. Also nicht nur ein vom Browser-Locale unterschiedliches Datumsformat, sondern auch noch umrechnen von der lokalen Zeitzone.

LG,
CK