Czy mogę zastosować wymagany atrybut do pól <select> w HTML5?

Jak mogę sprawdzić, czy użytkownik wybrał coś z <select>pola w HTML5?

Widzę, <select>że nie obsługuje nowego requiredatrybutu ... czy muszę wtedy używać JavaScript? A może brakuje mi czegoś? : /

Obowiązkowe : opróżnij pierwszą wartość - wymagane prace na pustych wartościach

Wymagania wstępne : poprawny HTML5 DOCTYPE i nazwane pole wejściowe

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

Zgodnie z dokumentacją (lista i pogrubienie jest moje)

Wymagany atrybut jest atrybutem logicznym.
Po określeniu użytkownik będzie musiał wybrać wartość przed przesłaniem formularza.

Jeśli wybierz element

• ma określony wymagany atrybut,
• nie ma określonego atrybutu wielokrotnego,
• i ma rozmiar wyświetlacza 1 (nie ma SIZE = 2 lub więcej - pomiń go, jeśli nie jest potrzebny);
• a jeśli wartość pierwszego elementu opcji na liście opcji elementu wyboru (jeśli istnieje) jest pustym ciągiem (tj. obecnym jako value=""),
• a macierzystym węzłem tego elementu opcji jest element select (a nie element optgroup),

wtedy ta opcja jest opcją etykiety elementu zastępczego zaznaczonego elementu.

<select>Elementem obsługuje się requiredcechę, według specyfikacji:

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

Która przeglądarka tego nie honoruje?

(Oczywiście i tak musisz sprawdzić poprawność na serwerze, ponieważ nie możesz zagwarantować, że użytkownicy będą mieli włączoną obsługę JavaScript).

Możesz użyć selectedatrybutu dla elementu opcji, aby wybrać opcję domyślnie. Możesz użyć requiredatrybutu dla elementu select, aby upewnić się, że użytkownik coś wybierze.

W Javascripcie możesz sprawdzić selectedIndexwłaściwość, aby uzyskać indeks wybranej opcji, lub możesz sprawdzić valuewłaściwość, aby uzyskać wartość wybranej opcji.

Zgodnie ze specyfikacją HTML5 selectedIndex„zwraca indeks pierwszego wybranego elementu, jeśli istnieje, lub −1, jeśli nie ma wybranego elementu. I value” zwraca wartość pierwszego wybranego elementu, jeśli istnieje, lub pusty ciąg znaków, jeśli istnieje brak zaznaczonego elementu. ”Więc jeśli wybranyIndex = -1, to wiesz, że nic nie wybrali.

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

Tak, działa:

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

musisz pozostawić pierwszą opcję pustą.

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

najpierw musisz przypisać pustą wartość w pierwszej opcji. tj. Wybierz tutaj. tylko wymagane będzie działać.

Zmień wartość pierwszego elementu pola wyboru na pusty.

Tak więc za każdym razem, gdy publikujesz FORMULARZ, dostajesz pustą wartość i w ten sposób będziesz wiedział, że użytkownik nie wybrał niczego z listy rozwijanej.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

Musisz ustawić valueatrybut optionpustego ciągu:

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

selectzwróci valuewybrane optionz serwera, gdy użytkownik naciśnie submitprzycisk form. Puste valueto to samo, co puste textwejście -> podniesienie requiredkomunikatu.

w3schools

Atrybut value określa wartość, która ma zostać wysłana na serwer po przesłaniu formularza.

Przykład

spróbuj tego, to zadziała, próbowałem tego i działa.

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

Działa idealnie dobrze, jeśli wartość pierwszej opcji jest pusta. Objaśnienie: HTML5 odczyta wartość zerową po przesłaniu przycisku. Jeśli nie jest zerowy (atrybut wartości), zakłada się, że wybrana wartość nie jest zerowa, dlatego sprawdzanie poprawności zadziałałoby, tzn. Sprawdzając, czy w znaczniku opcji znajdują się dane. Dlatego nie wygeneruje metody sprawdzania poprawności. Jednak wydaje mi się, że druga strona stanie się jasna, jeśli atrybut wartości jest ustawiony na null tj. (Wartość = „”), HTML5 wykryje pustą wartość przy pierwszej, a raczej domyślnie wybranej opcji, a tym samym wyświetli komunikat o sprawdzeniu poprawności. Dzięki, że pytasz. Chętnie pomoże. Cieszę się, że wiedziałem.

W HTML5 możesz to zrobić, używając pełnego wyrażenia:

<select required="required">

Nie wiem, dlaczego to krótkie wyrażenie nie działa, ale spróbuj tego. Rozwiąże się.

Spróbuj tego

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

Możesz to zrobić również dynamicznie za pomocą JQuery

Zestaw wymagany

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

Usuń wymagane

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