Bisakah saya menerapkan atribut yang diperlukan untuk bidang <seleksi> dalam HTML5?

Bagaimana saya bisa memeriksa apakah pengguna telah memilih sesuatu dari <select>bidang di HTML5?

Saya mengerti <select>tidak mendukung requiredatribut baru ... apakah saya harus menggunakan JavaScript? Atau ada sesuatu yang saya lewatkan? : /

Wajib : Biarkan nilai pertama kosong - wajib bekerja pada nilai kosong

Prasyarat : mengoreksi html5 DOCTYPE dan bidang input bernama

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

Sesuai dokumentasi (daftar dan tebal adalah milik saya)

Atribut yang diperlukan adalah atribut boolean.
Ketika ditentukan, pengguna akan diminta untuk memilih nilai sebelum mengirimkan formulir.

Jika elemen pilih

• memiliki atribut yang diperlukan ditentukan,
• tidak memiliki beberapa atribut yang ditentukan,
• dan memiliki ukuran tampilan 1 (tidak memiliki SIZE = 2 atau lebih - hilangkan jika tidak diperlukan);
• dan jika nilai elemen opsi pertama dalam daftar opsi elemen pilih (jika ada) adalah string kosong (yaitu hadir sebagai value=""),
• dan simpul induk elemen opsi adalah elemen pilih (dan bukan elemen optgroup),

maka opsi itu adalah opsi label tempat penampung elemen pilih.

The <select>elemen tidak mendukung requiredatribut, sesuai spec:

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

Peramban mana yang tidak menghargai ini?

(Tentu saja, Anda harus memvalidasi di server, karena Anda tidak dapat menjamin bahwa pengguna akan mengaktifkan JavaScript.)

Anda dapat menggunakan selectedatribut untuk elemen opsi untuk memilih pilihan secara default. Anda dapat menggunakan requiredatribut untuk elemen pilih untuk memastikan bahwa pengguna memilih sesuatu.

Dalam Javascript, Anda dapat memeriksa selectedIndexproperti untuk mendapatkan indeks dari opsi yang dipilih, atau Anda dapat memeriksa valueproperti untuk mendapatkan nilai dari opsi yang dipilih.

Menurut spesifikasi HTML5, selectedIndex"mengembalikan indeks item yang dipilih pertama, jika ada, atau −1 jika tidak ada item yang dipilih. Dan value" mengembalikan nilai item yang dipilih pertama, jika ada, atau string kosong jika ada tidak ada item yang dipilih. "Jadi jika selectedIndex = -1, maka Anda tahu mereka belum memilih apa pun.

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

Ya, ini berfungsi:

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

Anda harus membiarkan opsi pertama kosong.

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

pertama Anda harus menetapkan nilai kosong pada opsi pertama. yaitu Pilih di sini. Hanya diperlukan yang akan bekerja.

Jadikan nilai item pertama dari kotak pilihan menjadi kosong.

Jadi ketika setiap Anda memposting FORMULIR Anda mendapatkan nilai kosong dan menggunakan cara ini Anda akan tahu bahwa pengguna belum memilih apa pun dari dropdown.

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

Anda perlu mengatur valueatribut optionke string kosong:

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

selectakan mengembalikan yang valuedipilih optionke server ketika pengguna menekan submittombol form. Kosong valuesama dengan textinput kosong -> menaikkan requiredpesan.

sekolah w3

Atribut nilai menentukan nilai yang akan dikirim ke server ketika formulir dikirimkan.

Contoh

coba ini, ini akan berhasil, saya telah mencoba ini dan ini berhasil.

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

Bekerja dengan baik jika nilai opsi pertama adalah nol. Penjelasan: HTML5 akan membaca nilai nol pada tombol kirim. Jika bukan null (atribut nilai), nilai yang dipilih diasumsikan tidak nol maka validasi akan berfungsi yaitu dengan memeriksa apakah ada data dalam tag opsi. Oleh karena itu tidak akan menghasilkan metode validasi. Namun, saya kira sisi lain menjadi jelas, jika atribut nilai diatur ke nol yaitu (value = ""), HTML5 akan mendeteksi nilai kosong pada pilihan pertama atau lebih tepatnya yang dipilih sehingga memberikan pesan validasi. Terima kasih untuk bertanya. Saya senang bisa membantu. Senang mengetahui jika saya melakukannya.

Di html5 Anda dapat menggunakan ekspresi penuh:

<select required="required">

Saya tidak tahu mengapa ungkapan singkat itu tidak berhasil, tetapi cobalah yang ini. Itu akan menyelesaikan.

Coba ini

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

Anda dapat melakukannya juga secara dinamis dengan JQuery

Setel yang diperlukan

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

Hapus yang diperlukan

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