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?

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

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

Bắt buộc : Có giá trị đầu tiên trống - hoạt động bắt buộc trên các giá trị trống

Điều kiện tiên quyết : chính xác html5 DOCTYPE và trường nhập có tên

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

Theo tài liệu (danh sách và in đậm là của tôi)

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

Nếu một yếu tố chọn

• có một thuộc tính bắt buộc được chỉ định,
• không có nhiều thuộc tính được chỉ định,
• và có kích thước hiển thị là 1 (không có SIZE = 2 trở lên - bỏ qua nếu không cần thiết);
• và nếu giá trị của phần tử tùy chọn đầu tiên trong danh sách tùy chọn của phần tử chọn (nếu có) là chuỗi trống (nghĩa là hiện tại value=""),
• và nút cha của phần tử tùy chọn đó là phần tử chọn (chứ không phải phần tử optgroup),

thì tùy chọn đó là tùy chọn nhãn giữ chỗ của phần tử chọn.

Phần <select>tử không hỗ trợ requiredthuộc tính, theo thông số kỹ thuật:

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

Trình duyệt nào không tôn vinh điều này?

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

Bạn có thể sử dụng selectedthuộc tính cho thành phần tùy chọn để chọn một lựa chọn theo mặc định. Bạn có thể sử dụng requiredthuộc tính cho thành phần 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 selectedIndextính để lấy chỉ mục của tùy chọn đã chọn hoặc bạn có thể kiểm tra thuộc valuetính để lấy 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 đượ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 trống nếu có không có mục nào được chọn. "Vì vậy, nếu được chọn Index = -1, thì bạn biết họ chưa chọn 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>

Vâng, nó hoạt động:

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

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

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

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

Làm cho giá trị của mục đầu tiên của hộp lựa chọn để trống.

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

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

Bạn cần đặt valuethuộc tính của optionchuỗi trố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>

selectsẽ trả lại cái valueđã chọn optioncho máy chủ khi người dùng nhấn submitvào form. Một khoảng trống valuegiống như một textđầu vào trống -> nâng cao requiredthông điệp.

trường học

Thuộc tính value chỉ định giá trị được gửi đến máy chủ khi biểu mẫu được gửi.

Thí dụ

Hãy thử cái này, cái này sẽ hoạt động, tôi đã thử cái này và cái này hoạt động.

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

Hoạt động hoàn toàn tốt nếu giá trị của tùy chọn đầu tiên là null. Giải thích: HTML5 sẽ đọc giá trị null khi gửi nút. Nếu không phải là null (thuộc tính giá trị), giá trị được chọn sẽ không phải là null do đó việc xác thực sẽ hoạt động tức là bằng cách kiểm tra xem có dữ liệu trong thẻ tùy chọn không. Do đó, nó sẽ không tạo ra phương thức xác nhận. Tuy nhiên, tôi đoán rằng phía bên kia trở nên rõ ràng, nếu thuộc tính value được đặt thành null tức là (value = ""), HTML5 sẽ phát hiện một giá trị trống ở tùy chọn đầu tiên hoặc đúng hơn là được chọn mặc định, do đó đưa ra thông báo xác thực. Cam ơn vi đa hỏi. Vui vẻ giúp đỡ. Vui mừng khi biết nếu tôi đã làm.

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

<select required="required">

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

Thử cái này

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

Bạn cũng có thể làm điều đó một cách linh hoạt với JQuery

Đặt yêu cầu

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

Xóa yêu cầu

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