สัปดาห์ที่ 7 Form Validation และการจัดการข้อมูล

สไลด์บทเรียน

วัตถุประสงค์

1. สร้างฟอร์มที่รับข้อมูลผู้ใช้ได้เหมาะสม
2. ตรวจสอบข้อมูลด้วย HTML Constraint Validation และ JavaScript ได้
3. ใช้ Local Storage เพื่อบันทึกข้อมูลฝั่ง browser ได้

หัวข้อย่อย

1. Form UX และการออกแบบ input
2. label, name, required, type
3. Constraint Validation
4. Custom Validation Message
5. Submit Event และ preventDefault
6. Local Storage
7. การแสดง error และ feedback ที่เข้าใจง่าย

เนื้อหา

ฟอร์มเป็นจุดรับข้อมูลสำคัญของเว็บ หากออกแบบไม่ดีผู้ใช้อาจกรอกผิดหรือยกเลิกการใช้งาน การตรวจสอบข้อมูลควรชัดเจน ทันเวลา และไม่ทำให้ผู้ใช้รู้สึกผิดโดยไม่จำเป็น

Local Storage ช่วยบันทึกข้อมูลฝั่ง browser แบบง่าย เหมาะกับ preference, draft หรือข้อมูลทดลองใน lab แต่ไม่ควรใช้เก็บข้อมูลลับ เช่น password หรือ token ที่สำคัญ

ตัวอย่าง

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const name = form.elements.name.value.trim();
  localStorage.setItem("displayName", name);
});

กิจกรรมในชั้นเรียน

สร้างฟอร์มสมัครกิจกรรม พร้อม validation และบันทึกข้อมูลลง Local Storage

ศึกษาค้นคว้านอกเวลา

พัฒนาแบบฟอร์มให้แสดง error message ใกล้ช่องที่ผิด และคงค่าที่เคยกรอกไว้

คำถามทบทวน

1. Validation ฝั่ง client มีข้อจำกัดอะไร
2. preventDefault ใช้เพื่ออะไร
3. Local Storage เหมาะและไม่เหมาะกับข้อมูลแบบใด

กลับรายวิชา