คุณสมบัติ HTML DOM Input Password required

คุณสมบัติ required ของ input type="password" เกี่ยวข้องกับแอตทริบิวต์ required ใช้ตั้งค่า/ดึงค่า ว่าจำเป็นต้องกรอกช่องรหัสผ่านก่อนส่งฟอร์มหรือไม่ ทำให้ฟอร์มไม่สามารถส่งได้หากช่อง required ถูกทิ้งว่าง

ไวยากรณ์ (Syntax)

การตั้งค่า required:

textObject.required = true|false

• true — ต้องกรอกช่องนี้ก่อนส่งฟอร์ม
• false — ไม่บังคับ (ค่าเริ่มต้น)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ required ของ Input Password</h1>
<p>คลิกปุ่มเพื่อตรวจสอบว่าช่องรหัสผ่านบังคับกรอกหรือไม่</p>
<form action="/Sample_page.php">
  รหัสผ่าน: <input type="password" id="PASS1" name="passW" required>
  <input type="submit">
</form>
<br>
<button onclick="checkReq()">ตรวจสอบ</button>
<p id="Sample"></p>
<script>
  function checkReq() {
    var Req = document.getElementById("PASS1").required;
    if (Req == true)
      document.getElementById("Sample").innerHTML = "ช่องรหัสผ่านต้องกรอกก่อนส่งฟอร์ม";
    else
      document.getElementById("Sample").innerHTML = "ช่องรหัสผ่านไม่บังคับ สามารถทิ้งว่างได้";
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ช่องรหัสผ่านมี required attribute

คลิก "ตรวจสอบ": แสดง "ช่องรหัสผ่านต้องกรอกก่อนส่งฟอร์ม"

ลองกด Submit โดยไม่กรอก: เบราว์เซอร์บล็อกการส่งและแสดงข้อความแจ้งเตือน

คำอธิบายโค้ด

• Password field: id="PASS1", name="passW", required
• อยู่ในฟอร์ม action="/Sample_page.php"
• ปุ่ม "ตรวจสอบ" เรียก checkReq() ดึงค่า .required (boolean) มาแสดง

จุดสำคัญ: Required validation ทำงานฝั่ง client-side (เบราว์เซอร์) ควรมีการตรวจสอบฝั่งเซิร์ฟเวอร์ด้วยเพื่อความปลอดภัย