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

Thuộc tính required của HTML DOM Input Password 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 điền trường mật khẩu hay không trước khi submit form lên server. Điều này cho phép form không submit nếu trường password có thuộc tính required bị để trống.

Cú pháp

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

textObject.required = true|false

Ở đây, true biểu thị trường bắt buộc điền, false biểu thị tùy chọn điền trước khi submit.

Ví dụ

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

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính required của Input Password</h1> 
<p>Kiểm tra trường trên có bắt buộc điền hay không bằng cách nhấn nút dưới đây</p> 
<form action="/Sample_page.php"> 
Mật khẩu: <input type="password" id="PASS1" name="passW" required> 
<input type="submit"> 
</form> 
<br> 
<button onclick="checkReq()">KIỂM TRA</button> 
<p id="Sample"></p> 
<script> 
    function checkReq() { 
        var Req=document.getElementById("PASS1").required; 
        if(Req==true) 
            document.getElementById("Sample").innerHTML="Trường mật khẩu bắt buộc phải điền trước khi submit"; 
        else 
            document.getElementById("Sample").innerHTML="Trường mật khẩu là tùy chọn và có thể để 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:

Nếu required=true và nhấn submit:

Trong ví dụ trên:

Chúng ta tạo trường password với id="PASS1", name="passW" và required=true. Trường nằm trong form action="/Sample_page.php" chỉ định nơi submit dữ liệu khi nhấn submit:

<form action="/Sample_page.php"> Mật khẩu: <input type="password" id="PASS1" name="passW" required> <input type="submit"> </form>

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

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

Phương thức checkReq() dùng getElementById() lấy phần tử password và thuộc tính required (trả về true). Giá trị boolean gán cho biến Req và dựa trên 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("PASS1").required; 
    if(Req==true) 
        document.getElementById("Sample").innerHTML="Trường mật khẩu bắt buộc phải điền trước khi submit"; 
    else 
        document.getElementById("Sample").innerHTML="Trường mật khẩu là tùy chọn và có thể để trống"; 
}