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

256

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

Matt
źródło
1
Jeśli interesuje Cię dowolny poziom kompatybilności z różnymi przeglądarkami, prawdopodobnie będziesz musiał użyć JavaScript. Właściwym atrybutem jest selectedIndex.
Luke Sneeringer,
4
Zgodnie z wersją roboczą bieżącego edytora specyfikacji HTML5 (6 sierpnia 2011 r.) Element select ma wymagany atrybut. „Wymagany atrybut jest atrybutem boolowskim. Jeśli zostanie określony, użytkownik będzie musiał wybrać wartość przed przesłaniem formularza.” dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Odpowiedzi:

471

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.

mplungjan
źródło
27
Ponadto, aby użytkownik nie mógł wybrać braku opcji po jej wybraniu: <opcja wybrana = „wybrana” wyłączona = „wyłączona” wartość = „”> Wybierz </option>
CoolAJ86,
2
To nie ma sensu ... Również nie będzie działać na kilku przeglądarkach
mplungjan,
4
@ CoolAJ86 działa dobrze w Chrome 23, Firefox 16 i IE 10.
KTB
15
Widzę 2 opinie negatywne. Jeśli masz ochotę zanegować ten PROSZĘ komentować DLACZEGO
mplungjan
1
Parafrazowanie dokumentacji jest bardzo pomocne; dzięki
skia.heliou
13

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

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

Paul D. Waite
źródło
8
Jestem pewien, że po prostu potrzebował wartości = "" przy pierwszym wpisie - jeśli nie ma atrybutu wartości lub wartości we wszystkich opcjach, wymagane niepowodzenie wyzwolenia, ponieważ select zwraca wartość rzeczywistą
mplungjan
1
@mplungjan: ah , gotcha - dobrze zauważony.
Paul D. Waite
1
@ PaulD.Waite Czy nadal nie możemy zagwarantować, że użytkownicy będą mieli włączoną obsługę Javascript? Zajmuję się tworzeniem stron internetowych dopiero od około 2 lat i nigdy nie spotkałem się z tym problemem.
user137717,
2
@ user137717: To sieć. Nic nie możesz zagwarantować. Możesz oczywiście zdecydować, że nie warto wyżywić.
Paul D. Waite,
5

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>
james.garriss
źródło
1
@Apostle - Przestań próbować zmieniać tę odpowiedź za pomocą edycji. Jeśli uważasz, że jest to niepoprawne, możesz zostawić własną odpowiedź.
Brad Larson
@BradLarson Na początku nie do końca rozumiałem: kod nie jest kompletnym rozwiązaniem problemu w tym pytaniu lub jest objaśniającym przykładem ostatniego akapitu tej odpowiedzi. Prawdopodobnie drugi w tym przypadku. Myślę, że lepiej zorganizować ten kod jako fragment i pokazać wynik -1. Przepraszam, nie wyjaśniłem najpierw w komentarzach.
Apostoł
5

Tak, działa:

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

musisz pozostawić pierwszą opcję pustą.

pradipgarala
źródło
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
źródło
3
Ta odpowiedź po prostu powtarza poprzedni przykład bez dodatkowych wyjaśnień.
james.garriss
1

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

ayush
źródło
0

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>
Santosh Devnath
źródło
0

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

JBallin
źródło
0

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>
sayyed tabrez
źródło
0

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.

Kudzai Machiridza
źródło
-1

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

Roger Rocco
źródło
-4

Spróbuj tego

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
użytkownik2289459
źródło
-6

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

Zestaw wymagany

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

Usuń wymagane

$("#select1").removeAttr('required');
mlqmarkos12
źródło