Czy mogę zastosować wymagany atrybut do pól w HTML5?
Jak mogę sprawdzić, czy użytkownik wybrał coś z pola <select> w HTML5?
Widzę, że <select> nie obsługuje nowego atrybutu required... Czy muszę używać JavaScript? Czy coś mi umyka? :/
13 answers
Obowiązkowe : mieć pierwszą wartość empty-wymagane działa na pustych wartościach
Wymagania wstępne : poprawny DOCTYPE html5 i nazwane pole wejściowe
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
Zgodnie z dokumentacja (lista i pogrubienie jest moje)
Wymagany atrybut jest logiczny atrybut.
Gdy podano, użytkownik będzie wymagane, aby wybrać wartość przed wysłaniem formularza.Jeśli element select
- ma wymagany atrybut określony,
- nie ma podanego atrybutu wielokrotności,
- i ma rozmiar wyświetlacza 1 (nie ma rozmiaru=2 lub więcej - pomiń go, jeśli nie jest potrzebny);
- i jeśli wartość pierwszego elementu opcji w wybierz listę opcji elementu (jeśli any) jest pusty łańcuch (tzn. obecny jako
value=""),- i to węzłem nadrzędnym elementu option jest select element (a nie optgroup element),
Wtedy ta opcja jest wybierz etykietę zastępczą elementu opcja.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-28 10:03:28
Element <select> obsługuje atrybut required, zgodnie ze specyfikacją:
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.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-18 18:27:18
Tak, działa:
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
Pierwsza opcja musi być pusta.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-01 12:52:46
Możesz użyć atrybutu selected dla elementu option, aby domyślnie wybrać wybór. Możesz użyć atrybutu required dla elementu select, aby upewnić się, że użytkownik wybierze coś.
W Javascript możesz sprawdzić właściwość selectedIndex, aby uzyskać indeks wybranej opcji, lub możesz sprawdzić właściwość value, Aby uzyskać wartość wybranej opcji.
Zgodnie ze specyfikacją HTML5, selectedIndex " zwraca indeks pierwszego zaznaczonego elementu, jeśli istnieje, lub -1, jeśli nie ma wybrany element. And value " Zwraca wartość pierwszego zaznaczonego elementu, jeśli istnieje, lub pusty łańcuch, jeśli nie ma zaznaczonego elementu."Więc jeśli selectedIndex = -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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-19 11:00:17
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-22 13:32:44
Najpierw musisz przypisać pustą wartość w pierwszej opcji. tj. wybierz tutaj.niż tylko wymagane będzie działać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-17 06:05:23
Ustaw wartość pierwszego elementu pola wyboru na pustą.
Więc kiedy każdy post formularz masz pustą wartość i za pomocą tego sposobu można wiedzieć, ż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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-22 09:18:46
Musisz ustawić value atrybut option na pusty łańcuch:
<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 zwróci value wybranego option na serwer, gdy użytkownik naciśnie submit na form. Pusty value jest taki sam jak pusty text input - > podnoszenie wiadomości required.
Atrybut value określa wartość, która ma zostać wysłana do serwera podczas przesyłania formularza.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-12 00:45:08
Spróbuj tego, to zadziała, próbowałem tego i to 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-16 10:02:58
Działa doskonale, Jeśli pierwsza opcja ma wartość null. Wyjaśnienie: HTML5 odczyta wartość null przy przycisku Wyślij. Jeśli nie null (atrybut value), wybrana wartość nie jest przyjmowana jako null, dlatego Walidacja zadziałałaby tzn. sprawdzając, czy w znaczniku option były dane. W związku z tym nie opracuje metody walidacji. Jednak wydaje mi się, że druga strona staje się jasna, jeśli atrybut value jest ustawiony na null ie (value=""), HTML5 wykryje pustą wartość na pierwsza lub raczej domyślna wybrana opcja, dając w ten sposób komunikat walidacji. Dzięki, że pytasz. Cieszę się, że mogę pomóc. Cieszę się, że to zrobiłem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-11 13:16:47
W html5 możesz zrobić używając pełnego wyrażenia:
<select required="required">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-11 03:09:46
Spróbuj tego
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-17 07:01:47
Możesz to zrobić również dynamicznie z JQuery
Wymagany zestaw
$("#select1").attr('required', 'required');
Usuń wymagane
$("#select1").removeAttr('required');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-01 11:07:20