หัวข้อ 4: Form Validation ด้วย JavaScript

คำจำกัดความ

Form Validation คือการตรวจสอบข้อมูลจากผู้ใช้ก่อนนำไปใช้หรือส่งไป server เช่น ตรวจช่องว่าง รูปแบบอีเมล และความยาวรหัสผ่าน

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart TD
  A["User Input
ผู้ใช้กรอกข้อมูล"] --> B{"Valid?
ถูกต้องไหม"}
  B -- "No / ไม่" --> C["Show Error
แสดงข้อความผิดพลาด"]
  C --> A
  B -- "Yes / ใช่" --> D["Enable Submit
เปิดปุ่มส่งข้อมูล"]
  D --> E["Submit Form
ส่งฟอร์ม"]

การเข้าถึงค่าในฟอร์ม

Input การอ่านค่า
text/email/password input.value
checkbox checkbox.checked
select select.value
radio document.querySelector('input[name="x"]:checked')

Regular Expression

Regular Expression ใช้ตรวจรูปแบบข้อความ

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailPattern.test("ana@example.com")); // true

ตัวอย่าง Real-time Validation

<form id="registerForm" novalidate>
  <label>
    Email
    <input id="email" type="email" required>
  </label>
  <p id="emailError"></p>

  <label>
    Password
    <input id="password" type="password" minlength="8" required>
  </label>
  <p id="passwordError"></p>

  <button id="submitButton" disabled>สมัครสมาชิก</button>
</form>

<script>
  const form = document.getElementById("registerForm");
  const email = document.getElementById("email");
  const password = document.getElementById("password");
  const emailError = document.getElementById("emailError");
  const passwordError = document.getElementById("passwordError");
  const submitButton = document.getElementById("submitButton");

  function validateForm() {
    // ตรวจอีเมลด้วย Constraint Validation API
    emailError.textContent = email.checkValidity()
      ? ""
      : email.validationMessage;

    // ตรวจความยาว password
    passwordError.textContent = password.value.length >= 8
      ? ""
      : "รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร";

    // เปิดปุ่มเมื่อทุกช่องถูกต้อง
    submitButton.disabled = !(email.checkValidity() && password.value.length >= 8);
  }

  email.addEventListener("input", validateForm);
  password.addEventListener("input", validateForm);

  form.addEventListener("submit", event => {
    event.preventDefault();
    validateForm();
    if (!submitButton.disabled) {
      console.log("ส่งข้อมูลสมัครสมาชิก");
    }
  });

  // ตัวอย่างการใช้งานเริ่มต้น
  validateForm();
</script>

Constraint Validation API

สมการความแข็งแรงรหัสผ่านแบบง่าย

S = L + D + C

โดยที่ S คือคะแนนรหัสผ่าน, L คือคะแนนความยาว, D คือคะแนนการมีตัวเลข, และ C คือคะแนนการมีตัวอักษรพิเศษ

แบบทดสอบหลังเรียน

  1. input.value และ checkbox.checked ต่างกันอย่างไร
  2. Regular Expression ใช้ทำอะไร
  3. checkValidity() คืนค่าอะไร
  4. ทำไมควรแสดง error แบบ real-time
  5. เหตุใดต้อง validate ซ้ำที่ server แม้ตรวจแล้วที่ client

กลับสัปดาห์ที่ 5