วิธีระบุให้ช่องกรอกข้อมูลเป็นบังคับ (Required) ใน HTML

แอตทริบิวต์ required ใน HTML ใช้ระบุว่าองค์ประกอบนั้นต้องถูกกรอกก่อนส่งฟอร์ม หากฟิลด์ว่างและกด Submit จะเกิดข้อผิดพลาด "Please fill out this field" และฟอร์มจะไม่ส่ง

แอตทริบิวต์ required ใช้ได้กับ <input>, <select>, และ <textarea>

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ required:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML required attribute</title>
  </head>
  <body>
    <h2>Register</h2>
    <form action="/new.php">
      <input type="text" placeholder="Student UserName" name="name" required><br>
      <input type="email" placeholder="Email" name="email" required><br>
      <input type="password" placeholder="Password" name="password" required minlength="8"><br>
      <select name="country" required>
        <option value="">Select Country</option>
        <option value="th">Thailand</option>
        <option value="us">USA</option>
      </select><br>
      <textarea name="bio" required placeholder="Bio"></textarea><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Input Types ที่รองรับ required

• text, search, url, tel, email, password
• number, range, date, month, week, time, datetime-local
• checkbox (ต้องติ๊ก), radio (ต้องเลือกหนึ่งในกลุ่ม)
• file (ต้องเลือกไฟล์)
• <select>, <textarea>

Checkbox Required (ต้องติ๊ก)

<label>
  <input type="checkbox" name="terms" required>
  I agree to Terms & Conditions
</label>

Radio Group Required (เลือกอย่างน้อยหนึ่ง)

<fieldset>
  <legend>Gender (required)</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f"> Female</label>
  <label><input type="radio" name="gender" value="o"> Other</label>
</fieldset>

หมายเหตุ: ใส่ required แค่หนึ่งตัวในกลุ่ม radio ก็พอ

Custom Validation Message

<input type="text" name="username" required
       oninvalid="this.setCustomValidity('Username is required')"
       oninput="this.setCustomValidity('')">

CSS :required และ :optional

input:required {
  border-left: 3px solid #dc3545;
}

input:required:invalid {
  border-color: #dc3545;
}

input:optional {
  border-left: 3px solid #6c757d;
}

/* Required indicator */
label.required::after {
  content: " *";
  color: #dc3545;
}

JavaScript: ตรวจสอบ Required Fields

const form = document.querySelector('form');
const requiredFields = form.querySelectorAll('[required]');

form.addEventListener('submit', (e) => {
  let valid = true;
  requiredFields.forEach(field => {
    if (!field.value.trim()) {
      field.classList.add('error');
      valid = false;
    } else {
      field.classList.remove('error');
    }
  });
  if (!valid) e.preventDefault();
});

⚠️ สำคัญ: Client-side validation (required) เป็นเพื่อ UX เท่านั้น Server-side validation จำเป็นต้องมีเสมอ เพื่อความปลอดภัย