Gerekli özelliği HTML5'teki <select> alanlarına uygulayabilir miyim?

256

Bir kullanıcının <select>HTML5'teki bir alandan bir şey seçip seçmediğini nasıl kontrol edebilirim ?

Görüyorum <select>ki yeni requiredözelliği desteklemiyor ... O zaman JavaScript kullanmak zorunda mıyım? Yoksa özlediğim bir şey var mı? : /

— Mat
kaynak

1

Tarayıcılar arası herhangi bir uyumluluk düzeyiyle ilgileniyorsanız, muhtemelen JavaScript kullanmanız gerekir. İstediğiniz özellik selectedIndex.

— Luke Sneeringer

4

Geçerli düzenleyicinin HTML5 spesifikasyonu taslağına göre (6 Ağu 2011), select öğesinin gerekli bir özelliği var. "Gereken özellik bir boole özelliğidir. Belirtildiğinde, kullanıcının formu göndermeden önce bir değer seçmesi gerekir." dev.w3.org/html5/spec/Overview.html#the-select-element

— james.garriss

471

Zorunlu : İlk değeri boş bırakın - boş değerler üzerinde gerekli işler

Önkoşullar : Doğru html5 DOCTYPE ve adlandırılmış giriş alanı

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

Gereğince belgeleri (listeleme ve koyu benimdir)

Gerekli özellik bir boolean özelliğidir.
Belirtildiğinde, kullanıcının formu göndermeden önce bir değer seçmesi istenir.

Bir seçim öğesi

gerekli bir özelliği belirtmişse,

belirtilmiş birden fazla özelliği yok,

ve ekran boyutu 1 (SIZE = 2 veya daha fazla değil - gerekmiyorsa atlayın);

ve seçme öğesinin seçenekler listesindeki (varsa) ilk seçenek öğesinin değeri boş dize (yani şu şekilde sunulur value="") ise,

ve bu seçenek öğesinin üst düğümü seçme öğesidir (bir optgroup öğesi değil),

bu seçenek, seçim öğesinin yer tutucu etiket seçeneğidir.

— mplungjan
kaynak

27

Ayrıca, kullanıcı seçildikten sonra seçeneği

— seçemez

2

Bu mantıklı değil ... Ayrıca birkaç tarayıcı üzerinde çalışmaz

— mplungjan

4

@ CoolAJ86 Chrome 23, Firefox 16 ve IE 10'da iyi çalışır.

— KTB

15

2 aşağı oy görüyorum. NEDEN gibi bu LÜTFEN yorum aşağı indirmek istiyorsanız

— mplungjan

1

Belgelerin açıklanması çok yardımcı olur; thanks

— skia.heliou

13

<select>Eleman desteği yok requiredspec göre, niteliği:

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

Hangi tarayıcı bunu kabul etmiyor?

(Elbette, kullanıcıların JavaScript'in etkin olacağını garanti edemeyeceğiniz için yine de sunucuda doğrulamanız gerekir.)

— Paul D. Waite
kaynak

8

Eminim o sadece ilk girişte bir değer = "" gerekli - eğer bir değer özniteliği veya tüm seçeneklerde bir değer yoksa, çünkü seçim gerçek bir değer döndürür gerekli tetikleme başarısız

— mplungjan

1

@mplungjan: ah , iyi yakaladım.

— Paul D.Waite

1

@ PaulD.Waite Kullanıcıların Javascript'i etkinleştireceklerini hala garanti edemeyiz mi? Yaklaşık 2 yıldır web geliştirmeye başladım ve bu problemle hiç karşılaşmadım.

— user137717

2

@ user137717: Web. Hiçbir şeyi garanti edemezsiniz. Tabii ki, yemek için değmez olduğuna karar verebilirsiniz.

— Paul D.Waite

5

selectedVarsayılan olarak bir seçim seçmek için seçenek öğesinin özniteliğini kullanabilirsiniz . requiredKullanıcının bir şey seçtiğinden emin olmak için select öğesinin özelliğini kullanabilirsiniz .

Javascript'te, selectedIndexseçilen seçeneğin dizinini almak için valueözelliği kontrol edebilir veya seçilen seçeneğin değerini almak için özelliği kontrol edebilirsiniz .

HTML5 spesifikasyonuna göre, selectedIndex"varsa, ilk seçilen öğenin dizinini veya seçilen bir öğe yoksa −1 valuedeğerini döndürür . " Varsa, ilk seçilen öğenin değerini veya varsa boş dizeyi döndürür "Seçili öğe yok = -1 ise, hiçbir şey seçmediklerini bilirsiniz."

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

1

@Apostle - Lütfen bu yanıtı düzenlemeler yoluyla değiştirmeye çalışmayın. Bunun yanlış olduğuna inanıyorsanız, kendi cevabınızı bırakmaktan çekinmeyin.

— Brad Larson

@BradLarson İlk başta tam olarak anlamadım: kod bu sorudaki soruna tam bir çözüm değil veya bu cevabın son paragrafına açıklayıcı bir örnek. Muhtemelen bu durumda ikinci. Bu kodu snippet olarak düzenlemek ve sonucu göstermek için daha iyi düşünüyorum -1. Üzgünüm, önce yorumlarda açıklık getirmedim.

— Havari

5

Evet, çalışıyor:

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

ilk seçeneği boş tutmalısınız.

— pradipgarala
kaynak

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
kaynak

3

Bu cevap sadece ek bir açıklama olmadan önceki bir örneği tekrarlar.

— james.garriss

1

önce ilk seçenekte boş değer atamanız gerekir. yani burada seçin. sadece gerekli olan işe yarayacak.

— ayush
kaynak

0

Seçim kutusunun ilk öğesinin değerini boş bırakın.

Bu nedenle, her FORM yayınladığınızda boş değer elde edersiniz ve bu yolu kullanarak kullanıcının açılır menüden bir şey seçmediğini bilirsiniz.

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

— santosh devnath
kaynak

0

valueÖzelliğini optionboş dizeye ayarlamanız gerekir :

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

selectkullanıcı üzerine bastığında valueseçili olanı optionsunucuya döndürür . Boş , boş bir giriş ile aynıdır -> mesajı yükseltir .submitformvaluetextrequired

W3Schools

Value özniteliği, bir form gönderildiğinde sunucuya gönderilecek değeri belirtir.

Misal

— JBallin
kaynak

0

bunu dene, bu işe yarayacak, bunu denedim ve bu işe yarıyor.

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

0

İlk seçeneğin değeri null olduğunda mükemmel çalışır. Açıklama: HTML5, düğme gönderildiğinde boş bir değer okuyacaktır. Null değilse (değer özniteliği), seçilen değerin null olmadığı varsayılır, bu nedenle doğrulama, yani seçenek etiketinde veri olup olmadığını kontrol ederek işe yarayacaktır. Bu nedenle, doğrulama yöntemini üretmeyecektir. Ancak, diğer taraf netleşir, eğer değer özniteliği null olarak ayarlanırsa (değer = ""), HTML5 ilk veya daha çok varsayılan seçili seçenekte boş bir değer algılar ve böylece doğrulama mesajını verir. Sorduğunuz için teşekkürler. Memnuniyetle yardım ettim. Yaptığımı bilmek güzel.

— Kudzai Machiridza
kaynak

-1

Html5'te tam ifadeyi kullanarak şunları yapabilirsiniz:

<select required="required">

Kısa ifadenin neden çalışmadığını bilmiyorum, ama bunu deneyin. Çözecek.

— Roger Rocco
kaynak

-4

Bunu dene

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

— user2289459
kaynak

-6

JQuery ile dinamik olarak da yapabilirsiniz

Set gerekli

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

Kaldırmanız gerekiyor

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

— mlqmarkos12
kaynak