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

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? : /

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 requiredAttribut gemäß der Spezifikation:

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

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

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>

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

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

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');