reveal.js

# Form Validation ด้วย JavaScript

Lesson 4 - JavaScript กับ DOM และ Event

---

## คำจำกัดความ

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

<pre class="mermaid">
%%{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<br/>ผู้ใช้กรอกข้อมูล"] --> B{"Valid?<br/>ถูกต้องไหม"}
  B -- "No / ไม่" --> C["Show Error<br/>แสดงข้อความผิดพลาด"]
  C --> A
  B -- "Yes / ใช่" --> D["Enable Submit<br/>เปิดปุ่มส่งข้อมูล"]
  D --> E["Submit Form<br/>ส่งฟอร์ม"]
</pre>

---

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

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

---

## Regular Expression

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

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

---

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

```html
<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>

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

- **`checkValidity()`** คืน `true` เมื่อ input ถูกต้อง
- **`validationMessage`** คืนข้อความ error ของ browser
- **`setCustomValidity()`** กำหนดข้อความ error เอง

---

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

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

---

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

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

---

## End

<a href="/web-programming/05-dom-event/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>