Jnnbo: Select Auswahlliste Prüfen

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>
  1. @@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

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. 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.

      1. @@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

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. 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?

          1. 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

            1. Hallo Der,

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

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

              1. @@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?

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            2. 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.

              1. 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

            3. @@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

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. 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

            1. @@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

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. 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

                1. @@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

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. 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