Kann ich das erforderliche Attribut auf <select> -Felder in HTML5 anwenden?

256

Wie kann ich überprüfen, ob ein Benutzer etwas aus einem <select>Feld in HTML5 ausgewählt hat?

Ich sehe, <select>dass das neue requiredAttribut nicht unterstützt wird ... muss ich dann JavaScript verwenden? Oder fehlt mir etwas? : /

Matt
quelle
1
Wenn Sie an einer browserübergreifenden Kompatibilität interessiert sind, müssen Sie wahrscheinlich JavaScript verwenden. Das gewünschte Attribut ist selectedIndex.
Luke Sneeringer
4
Gemäß dem aktuellen Editorentwurf der HTML5-Spezifikation (6. August 2011) verfügt das Auswahlelement über ein erforderliches Attribut. "Das erforderliche Attribut ist ein boolesches Attribut. Wenn angegeben, muss der Benutzer vor dem Absenden des Formulars einen Wert auswählen." dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Antworten:

471

Obligatorisch : Lassen Sie den ersten Wert leer - erforderlich funktioniert bei leeren Werten

Voraussetzungen : HTML5 DOCTYPE und ein benanntes Eingabefeld korrigieren

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

Gemäß der Dokumentation (die Auflistung und Fettdruck ist meine)

Das erforderliche Attribut ist ein boolesches Attribut.
Wenn angegeben, muss der Benutzer vor dem Absenden des Formulars einen Wert auswählen.

Wenn ein ausgewähltes Element

  • hat ein erforderliches Attribut angegeben,
  • hat kein Mehrfachattribut angegeben,
  • und hat eine Anzeigegröße von 1 (nicht GRÖSSE = 2 oder mehr - weglassen, wenn nicht benötigt);
  • und wenn der Wert des ersten Optionselements in der Optionsliste des Auswahlelements (falls vorhanden) die leere Zeichenfolge ist (dh vorhanden als value=""),
  • und der übergeordnete Knoten dieses Optionselements ist das Auswahlelement (und kein Optgruppenelement).

dann ist diese Option die Platzhalter-Beschriftungsoption des Auswahlelements.

mplungjan
quelle
27
Damit der Benutzer die Nichtoption nach ihrer Auswahl nicht mehr auswählen kann: <option selected = "selected" disabled = "disabled" value = ""> Bitte
auswählen
2
Das macht keinen Sinn ... Auch wird es nicht auf mehreren Browsern
funktionieren
4
@ CoolAJ86 Funktioniert gut in Chrome 23, Firefox 16 und IE 10.
KTB
15
Ich sehe 2 Abstimmungen. Wenn Sie das Gefühl , dass dieses Downvoting BITTE Kommentar zu WARUM
mplungjan
1
Die Umschreibung der Dokumentation ist sehr hilfreich; danke
skia.heliou
13

Das <select>Element unterstützt das requiredAttribut gemäß der Spezifikation:

Welcher Browser berücksichtigt dies nicht?

(Natürlich müssen Sie auf dem Server trotzdem validieren, da Sie nicht garantieren können, dass Benutzer JavaScript aktiviert haben.)

Paul D. Waite
quelle
8
Ich bin sicher, er brauchte nur einen Wert = "" beim ersten Eintrag - wenn es kein
Wertattribut
1
@mplungjan: ah , gotcha - gut entdeckt.
Paul D. Waite
1
@ PaulD.Waite Können wir immer noch nicht garantieren, dass Benutzer Javascript aktiviert haben? Ich bin erst seit ungefähr 2 Jahren in der Webentwicklung und bin nie auf dieses Problem gestoßen.
user137717
2
@ user137717: Es ist das Web. Sie können nichts garantieren. Sie können natürlich entscheiden, dass es sich nicht lohnt, für etwas zu sorgen.
Paul D. Waite
5

Sie können das selectedAttribut für das Optionselement verwenden, um standardmäßig eine Auswahl auszuwählen. Sie können das requiredAttribut für das Auswahlelement verwenden, um sicherzustellen, dass der Benutzer etwas auswählt.

In Javascript können Sie die selectedIndexEigenschaft überprüfen , um den Index der ausgewählten Option abzurufen, oder Sie können die valueEigenschaft überprüfen , um den Wert der ausgewählten Option abzurufen.

Gemäß der HTML5-Spezifikation gibt selectedIndex"den Index des ersten ausgewählten Elements zurück, falls vorhanden, oder -1, wenn kein ausgewähltes Element vorhanden ist. Und value" gibt den Wert des ersten ausgewählten Elements zurück, falls vorhanden, oder die leere Zeichenfolge, falls vorhanden kein ausgewähltes Element. "Wenn also selectedIndex = -1 ist, wissen Sie, dass sie nichts ausgewählt haben.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>
james.garriss
quelle
1
@Apostle - Bitte hören Sie auf, diese Antwort über Änderungen zu ändern. Wenn Sie glauben, dass es falsch ist, können Sie Ihre eigene Antwort hinterlassen.
Brad Larson
@BradLarson Zuerst habe ich nicht ganz verstanden: Der Code ist keine vollständige Lösung für das Problem in dieser Frage oder ein erklärendes Beispiel für den letzten Absatz dieser Antwort. Wahrscheinlich der zweite in diesem Fall. Ich denke besser, diesen Code als Snippet zu organisieren und das Ergebnis zu zeigen -1. Entschuldigung, ich habe in den Kommentaren nicht zuerst geklärt.
Apostel
5

Ja, es funktioniert:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

Sie müssen die erste Option leer lassen.

Pradipgarala
quelle
1
<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>
yatou
quelle
3
Diese Antwort wiederholt lediglich ein vorheriges Beispiel ohne zusätzliche Erklärung.
James.garriss
1

Zuerst müssen Sie in der ersten Option einen leeren Wert zuweisen. dh hier auswählen. als nur erforderlich funktioniert.

Ayush
quelle
0

Machen Sie den Wert des ersten Elements des Auswahlfelds leer.

Wenn Sie also jedes FORMULAR veröffentlichen, erhalten Sie einen leeren Wert. Auf diese Weise wissen Sie, dass der Benutzer nichts aus der Dropdown-Liste ausgewählt hat.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
Santosh Devnath
quelle
0

Sie müssen das valueAttribut von optionauf die leere Zeichenfolge setzen:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

selectdas wird wieder valueder ausgewählten optionan den Server , wenn der Benutzer drückt submitauf die form. Eine leere Eingabe entspricht valueeiner leeren textEingabe -> Auslösen der requiredNachricht.


w3schools

Das value-Attribut gibt den Wert an, der beim Senden eines Formulars an einen Server gesendet werden soll.

Beispiel

JBallin
quelle
0

versuche das, das wird funktionieren, ich habe es versucht und das funktioniert.

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>
sayyed tabrez
quelle
0

Funktioniert einwandfrei, wenn der Wert der ersten Option null ist. Erläuterung: Der HTML5 liest beim Senden der Schaltfläche einen Nullwert. Wenn nicht null (Wertattribut), wird angenommen, dass der ausgewählte Wert nicht null ist, daher hätte die Validierung funktioniert, dh indem überprüft wurde, ob das Options-Tag Daten enthält. Daher wird die Validierungsmethode nicht erstellt. Ich denke jedoch, dass die andere Seite klar wird, wenn das Wertattribut auf null gesetzt ist, dh (value = ""), erkennt HTML5 einen leeren Wert auf der ersten bzw. der standardmäßig ausgewählten Option und gibt so die Validierungsnachricht aus. Danke für die Frage. Freue mich zu helfen. Ich bin froh zu wissen, ob ich es getan habe.

Kudzai Machiridza
quelle
-1

In HTML5 können Sie den vollständigen Ausdruck verwenden:

<select required="required">

Ich weiß nicht, warum der kurze Ausdruck nicht funktioniert, aber probieren Sie diesen aus. Es wird sich lösen.

Roger Rocco
quelle
-4

Versuche dies

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
user2289459
quelle
-6

Sie können dies auch dynamisch mit JQuery tun

Set erforderlich

$("#select1").attr('required', 'required');

Erforderlich entfernen

$("#select1").removeAttr('required');
mlqmarkos12
quelle