คุณสมบัติ required ของ Textarea ใน HTML DOM

คุณสมบัติ required ของ HTML DOM Textarea ใช้สำหรับคืนค่าและแก้ไขค่าของแอตทริบิวต์ required ขององค์ประกอบ textarea ในเอกสาร HTML

ไวยากรณ์

1. การคืนค่า required

object.required

2. การแก้ไข required

object.required = true | false

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<title>คุณสมบัติ Textarea required ของ DOM</title>
<style>
  body {
    text-align: center;
  }
  .btn {
    display: block;
    margin: 1rem auto;
    background-color: #db133a;
    color: #fff;
    border: 1px solid #db133a;
    padding: 0.5rem;
    border-radius: 50px;
    width: 20%;
  }
  .show-message {
    font-weight: bold;
    font-size: 1.4rem;
    color: #ffc107;
  }
</style>
</head>
<body>
<h1>ตัวอย่างคุณสมบัติ Textarea required ของ DOM</h1>
<form id="form" method="post" action="">
  <fieldset>
    <legend>แบบฟอร์ม</legend>
    <textarea rows="5" cols="20" required placeholder="ป้อนข้อความ"></textarea>
    <input type="submit" class="btn" value="ส่งแบบฟอร์ม" onclick="checkRequired()">
  </fieldset>
</form>
<div class="show-message"></div>
<script>
  function checkRequired() {
    var textarea = document.querySelector("textarea");
    if (textarea.value === "") {
      document.querySelector(".show-message").innerHTML = "กรุณาป้อนข้อความ!";
    }
  }
</script>
</body>
</html>

ผลลัพธ์

คลิกปุ่ม "ส่งแบบฟอร์ม" โดยไม่ป้อนข้อความในองค์ประกอบ textarea