Tôi có thể áp dụng thuộc tính bắt buộc cho các trường <select> trong HTML5 không?

Question

Làm cách nào để kiểm tra xem người dùng đã chọn một thứ gì đó từ trường <select> trong HTML5?

Tôi thấy <select> không hỗ trợ thuộc tính required mới ... tôi có phải sử dụng JavaScript không? Hay có điều gì đó tôi đang thiếu? :/

Answer 1

bắt buộc: Có giá trị đầu tiên có sản phẩm nào - công trình cần thiết trên các giá trị rỗng

Điều kiện tiên quyết: đúng html5 DOCTYPE và một trường nhập tên

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

Theo the documentation (việc niêm yết và đậm là của tôi)

Thuộc tính bắt buộc là boolean thuộc tính.
Khi được chỉ định, người dùng sẽ được yêu cầu chọn giá trị trước khi gửi biểu mẫu.

Nếu chọn yếu tố

• có thuộc tính bắt buộc theo quy định,
• không có một thuộc tính nhiều quy định,
• và có kích thước hiển thị của 1 (không có SIZE = 2 hoặc nhiều hơn - bỏ qua nếu không cần);
• và nếu giá trị của phần tử tùy chọn đầu tiên trong danh sách chọn yếu tố của các tùy chọn (nếu có) là chuỗi rỗng,
• và nút cha rằng lựa chọn phần tử là chọn yếu tố (và không phải là một yếu tố optgroup ),

sau đó lựa chọn đó là chọn yếu tố của nhãn placeholder tùy chọn.

Answer 2

Yếu tố <select> không hỗ trợ thuộc tính required, theo spec:

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

Trình duyệt không tôn vinh này?

(Tất nhiên, bạn phải xác nhận trên máy chủ dù sao, như bạn không thể đảm bảo rằng người dùng sẽ phải kích hoạt Javascript.)

Answer 3

Bạn có thể sử dụng selected thuộc tính cho các phần tử tùy chọn để chọn một lựa chọn bởi mặc định. Bạn có thể sử dụng thuộc tính required cho phần tử chọn để đảm bảo rằng người dùng chọn thứ gì đó.

Trong Javascript, bạn có thể kiểm tra thuộc tính selectedIndex để nhận chỉ mục của tùy chọn đã chọn hoặc bạn có thể kiểm tra thuộc tính value để nhận giá trị của tùy chọn đã chọn.

Theo thông số HTML5, selectedIndex "trả về chỉ mục của mục được chọn đầu tiên, nếu có hoặc −1 nếu không có mục đã chọn. Và value" trả về giá trị của mục được chọn đầu tiên, nếu có hoặc chuỗi rỗng nếu không có mục đã chọn." Vì vậy, nếu selectedIndex = -1, sau đó bạn biết rằng họ chưa chọn bất cứ điều gì.

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

Answer 4

Hãy thử điều này

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

Answer 5

bạn có thể làm điều đó cũng tự động với JQuery

Set cần

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

Remove cần

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

Answer 6

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

Answer 7

Trong html5 bạn có thể làm bằng cách sử dụng biểu hiện đầy đủ:

<select required="required"> 

Tôi không biết lý do tại sao biểu ngắn không hoạt động, nhưng hãy thử cái này. Nó sẽ giải quyết.

Answer 8

Vâng, nó làm việc:

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

bạn phải giữ tùy chọn đầu tiên trống.

Answer 9

Đặt giá trị của mục đầu tiên của hộp lựa chọn thành trống.

Vì vậy, khi mỗi bạn đăng MẪU, bạn sẽ nhận được giá trị trống và sử dụng cách này bạn sẽ biết rằng người dùng chưa chọn bất kỳ thứ gì từ trình đơn thả xuống.

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

Answer 10

trước tiên bạn phải chỉ định giá trị trống trong tùy chọn đầu tiên. tức là Chọn ở đây. Chỉ yêu cầu sẽ hoạt động.

Answer 11

Bạn cần phải thiết lập các thuộc tính của valueoption với chuỗi rỗng:

<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 sẽ trả lại value của chọn option đến máy chủ khi người dùng nhấn submit trên form. Một số trống value giống với một đầu vào rỗng text -> nâng cao thông báo required.

---

w3schools

Thuộc tính giá trị xác định giá trị phải được gửi đến một máy chủ khi một mẫu được gửi.

Example