Wie kann ich überprüfen, ob ein Benutzer etwas aus einem <select>
Feld in HTML5 ausgewählt hat?
Ich sehe, <select>
dass das neue required
Attribut nicht unterstützt wird ... muss ich dann JavaScript verwenden? Oder fehlt mir etwas? : /
Wie kann ich überprüfen, ob ein Benutzer etwas aus einem <select>
Feld in HTML5 ausgewählt hat?
Ich sehe, <select>
dass das neue required
Attribut nicht unterstützt wird ... muss ich dann JavaScript verwenden? Oder fehlt mir etwas? : /
Antworten:
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.
Das <select>
Element unterstützt das required
Attribut 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.)
Sie können das selected
Attribut für das Optionselement verwenden, um standardmäßig eine Auswahl auszuwählen. Sie können das required
Attribut für das Auswahlelement verwenden, um sicherzustellen, dass der Benutzer etwas auswählt.
In Javascript können Sie die selectedIndex
Eigenschaft überprüfen , um den Index der ausgewählten Option abzurufen, oder Sie können die value
Eigenschaft ü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>
-1
. Entschuldigung, ich habe in den Kommentaren nicht zuerst geklärt.
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.
<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>
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>
Sie müssen das value
Attribut von option
auf 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>
select
das wird wieder value
der ausgewählten option
an den Server , wenn der Benutzer drückt submit
auf die form
. Eine leere Eingabe entspricht value
einer leeren text
Eingabe -> Auslösen der required
Nachricht.
Das value-Attribut gibt den Wert an, der beim Senden eines Formulars an einen Server gesendet werden soll.
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>
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.
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.
Versuche dies
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
Sie können dies auch dynamisch mit JQuery tun
Set erforderlich
$("#select1").attr('required', 'required');
Erforderlich entfernen
$("#select1").removeAttr('required');
selectedIndex
.