Thuộc tính required của Input Radio trong HTML DOM

Thuộc tính required của HTML DOM input radio liên kết với thuộc tính required của phần tử <input>. Thuộc tính này dùng để thiết lập và trả về xem có bắt buộc phải chọn nút radio nào đó hay không trước khi form được gửi đến server. Điều này cho phép form không submit nếu nút radio có thuộc tính required bị người dùng bỏ trống.

Cú pháp

Cú pháp để thiết lập thuộc tính required:

radioObject.required = true|false

Ở đây, true đại diện cho nút radio bắt buộc phải chọn, false đại diện cho việc chọn là tùy chọn trước khi submit form.

Ví dụ

Ví dụ minh họa cho thuộc tính required của Input Radio:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính required của Radio</h1> 
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php"> 
TRÁI CÂY: <input type="radio" name="fruits" id="Mango" required>Xoài 
<br><br> 
<input type="submit"> 
</form> 
<button type="button" onclick="checkReq()">KIỂM TRA</button> 
<p id="Sample"></p> 
<script> 
    function checkReq() { 
        var Req=document.getElementById("Mango").required; 
        if(Req==true) 
            document.getElementById("Sample").innerHTML="Nút radio bắt buộc phải chọn trước khi submit"; 
        else 
            document.getElementById("Sample").innerHTML="Nút radio là tùy chọn và có thể bỏ trống"; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút KIỂM TRA:

Khi nhấn nút "Submit" mà không chọn nút radio:

Trong ví dụ trên:

Chúng ta tạo nút radio với id="Mango", name="fruits" và thuộc tính required=true. Nút radio nằm trong form có action="/Sample_page.php" chỉ định nơi submit dữ liệu. Form cũng có style inline:

<form style="border:solid 1px green;padding:5px" action="/Sample_page.php"> TRÁI CÂY: <input type="radio" name="fruits" id="Mango" required>Xoài <br><br> <input type="submit"> </form>

Tạo nút KIỂM TRA thực thi phương thức checkReq() khi được nhấn:

<button type="button" onclick="checkReq()">KIỂM TRA</button>

Phương thức checkReq() dùng getElementById() để lấy phần tử radio và lấy thuộc tính required (trả về true). Giá trị boolean gán cho biến Req và dựa trên giá trị true/false hiển thị thông báo phù hợp trong đoạn văn id="Sample":

function checkReq() { 
    var Req=document.getElementById("Mango").required; 
    if(Req==true) 
        document.getElementById("Sample").innerHTML="Nút radio bắt buộc phải chọn trước khi submit"; 
    else 
        document.getElementById("Sample").innerHTML="Nút radio là tùy chọn và có thể bỏ trống"; 
}