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


256

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


1
Jika Anda tertarik pada tingkat kompatibilitas lintas-browser apa pun, Anda mungkin harus menggunakan JavaScript. Atribut yang Anda inginkan adalah selectedIndex.
Luke Sneeringer

4
Per konsep editor HTML5 saat ini (6 Agustus 2011), elemen yang dipilih memang memiliki atribut yang diperlukan. "Atribut yang diperlukan adalah atribut boolean. Ketika ditentukan, pengguna akan diminta untuk memilih nilai sebelum mengirimkan formulir." dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Jawaban:


471

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.


27
Juga, sehingga pengguna tidak dapat memilih non-opsi begitu telah dipilih: <option selected = "selected" disabled = "disabled" value = ""> Silakan Pilih </option>
CoolAJ86

2
Itu tidak masuk akal ... Juga tidak akan berfungsi pada beberapa browser
mplungjan

4
@ CoolAJ86 Bekerja dengan baik di Chrome 23, Firefox 16 dan IE 10.
KTB

15
Saya melihat 2 downvotes. Jika Anda ingin membatalkan komentar ini TOLONG untuk MENGAPA
mplungjan

1
Parafrase dokumentasi sangat membantu; terima kasih
skia.heliou

13

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

Peramban mana yang tidak menghargai ini?

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


8
Saya yakin dia hanya membutuhkan nilai = "" pada entri pertama - jika tidak ada atribut nilai atau nilai pada semua opsi yang diperlukan gagal untuk memicu karena pilih mengembalikan nilai aktual
mplungjan

1
@plugjan: ah , gotcha - terlihat baik.
Paul D. Waite

1
@ PaulD.Waite Bisakah kita masih tidak menjamin bahwa pengguna akan mengaktifkan Javascript? Saya hanya dalam pengembangan web sekitar 2 tahun sekarang dan saya tidak pernah mengalami masalah itu.
user137717

2
@ user137717: Ini web. Anda tidak bisa menjamin apa pun. Anda dapat, tentu saja, memutuskan bahwa itu tidak layak untuk dilayani.
Paul D. Waite

5

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>

1
@Apostle - Harap berhenti mencoba mengubah jawaban ini melalui pengeditan. Jika Anda yakin itu salah, silakan tinggalkan jawaban Anda sendiri.
Brad Larson

@BradLarson Pada awalnya saya tidak begitu mengerti: kode itu bukan solusi lengkap untuk masalah dalam pertanyaan ini atau merupakan contoh penjelasan untuk paragraf terakhir dari jawaban ini. Mungkin yang kedua dalam hal ini. Saya pikir lebih baik mengatur kode ini sebagai potongan dan menunjukkan hasilnya -1. Maaf, saya tidak mengklarifikasi dalam komentar terlebih dahulu.
Rasul

5

Ya, ini berfungsi:

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

Anda harus membiarkan opsi pertama kosong.


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>

3
Jawaban ini hanya mengulangi contoh sebelumnya tanpa penjelasan tambahan.
james.garriss

1

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


0

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>

0

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


0

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>

0

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.


-1

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.


-4

Coba ini

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

-6

Anda dapat melakukannya juga secara dinamis dengan JQuery

Setel yang diperlukan

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

Hapus yang diperlukan

$("#select1").removeAttr('required');
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.