สร้างฟอร์มติดต่อ React ระดับองค์กรด้วย Zod และ CSS Modules
เรียนรู้วิธีสร้างฟอร์มติดต่อใน ReactJS พร้อมการตรวจสอบข้อมูลด้วย Zod และจัดการฟอร์มอย่างมีประสิทธิภาพด้วย react-hook-form และ CSS Modules
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การตรวจสอบข้อมูลผู้ใช้ (Input Validation) เป็นสิ่งสำคัญที่ไม่ควรมองข้ามเพื่อความปลอดภัยของเว็บไซต์
- ใช้ ReactJS และ CSS Modules ร่วมกันในการพัฒนาส่วนติดต่อผู้ใช้งาน
- ใช้งาน Zod ร่วมกับ react-hook-form ผ่าน @hookform/resolvers สำหรับจัดการและตรวจสอบฟอร์ม
- กำหนดเงื่อนไขความยาวข้อความใน Zod เช่น กำหนดช่องข้อความระหว่าง 10 ถึง 1,000 ตัวอักษร
ฟอร์มถือเป็นหัวใจหลักสำหรับการป้อนข้อมูลและการโต้ตอบของผู้ใช้งานบนเว็บไซต์ แต่กฎเหล็กของนักพัฒนาคือการไม่ไว้วางใจข้อมูลจากผู้ใช้ การปล่อยให้ข้อมูลผ่านเข้ามาโดยไม่มีการตรวจสอบจะทำให้เว็บไซต์เกิดช่องโหว่ได้ ดังนั้นการตรวจสอบข้อมูลจึงเป็นสิ่งจำเป็นที่เราต้องทำเพื่อรักษาความปลอดภัยและความเสถียรของเว็บไซต์
ในบทความนี้เราจะเรียนรู้วิธีสร้างฟอร์มติดต่อที่สะอาดตาโดยใช้ ReactJS และ CSS Modules ส่วนการตรวจสอบข้อมูลในฟอร์มเราจะเลือกใช้ไลบรารี Zod พร้อมกับโค้ดตัวอย่างที่สามารถนำไปประยุกต์ใช้ได้ทันที
ก่อนที่จะเริ่มทำตามบทแนะนำนี้ คุณต้องเตรียมความพร้อมและติดตั้งเครื่องมือที่จำเป็นสำหรับการสร้างโปรเจกต์ผ่าน Terminal โดยใช้คำสั่งสร้างโปรเจกต์ Vite และติดตั้งแพ็กเกจที่เกี่ยวข้องดังนี้
- npm create vite@latest zod-form-validation -- --template react
- npm install zod react-hook-form @hookform/resolvers
- npm run dev
เมื่อติดตั้งการพึ่งพา (Dependencies) ทั้งหมดเสร็จเรียบร้อยแล้ว เซิร์ฟเวอร์สำหรับพัฒนาจะรันเริ่มต้นที่ http://localhost:5173/ โดยเราจำเป็นต้องจัดระเบียบโครงสร้างไดเรกทอรีโปรเจกต์ให้เรียบร้อยก่อนเขียนโค้ด Zod schema
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
สำหรับการกำหนดค่า Zod schema เราจะทำการนำเข้า z จากไลบรารี zod และกำหนดกฎการตรวจสอบข้อมูลตามความต้องการ เช่น การใช้เมธอด string และ email ควบคู่กับเมธอด min และ max เพื่อจำกัดความยาวของข้อความในฟอร์ม ตัวอย่างเช่นช่องข้อความ (message) จะต้องยอมรับเฉพาะข้อมูลที่เป็นข้อความและมีความยาวระหว่าง 10 ถึง 1,000 ตัวอักษร หากละเมิดกฎดังกล่าว Zod จะแสดงข้อความแจ้งเตือนข้อผิดพลาดที่กำหนดไว้ทันที
การใช้งาน Zod ในบทความนี้ทำงานอยู่บนฝั่งไคลเอนต์ (Client-side) เป็นหลัก แต่นักพัฒนาควรตระหนักว่าข้อมูลที่ส่งมาจากฝั่งไคลเอนต์ไม่สามารถเชื่อถือได้ทั้งหมด หากมีการส่งข้อมูลฟอร์มไปยังเซิร์ฟเวอร์ ควรมีการกำหนดกฎการตรวจสอบข้อมูลฝั่งเซิร์ฟเวอร์ (Server-side validation) เพิ่มเติมเสมอเพื่อให้ระบบมีความปลอดภัยสูงสุด แม้ว่า Zod จะสามารถนำไปใช้บนฝั่งเซิร์ฟเวอร์ได้เช่นกันแต่ต้องมีการตั้งค่าเพิ่มเติม
ถัดมาในส่วนของการพัฒนาคอมโพเนนต์ เราจะสร้างไฟล์ ContactForm.jsx และ ContactForm.module.css ภายในโฟลเดอร์ components โดยใช้ฮุก useState เพื่อติดตามสถานะการส่งข้อมูลสองตัวคือ isSubmitting และ submitSuccess ซึ่งเริ่มต้นด้วยค่า false นอกจากนี้ยังมีการใช้งาน useForm จาก react-hook-form เพื่อช่วยจัดการค่าในฟอร์มและการตรวจสอบความถูกต้องได้อย่างราบรื่นโดยไม่ต้องสร้างตัวแปร state แยกสำหรับทุกๆ ช่องอินพุต
เมื่อผู้ใช้งานส่งฟอร์ม ฟังก์ชัน onSubmit จะทำงานโดยปรับสถานะ isSubmitting ให้เป็น true เพื่อปิดการใช้งานปุ่มชั่วคราว จากนั้นจำลองการเรียก API ด้วย Promise หากสำเร็จจะทำการรีเซ็ตค่าในฟอร์มกลับเป็นค่าเริ่มต้นและแสดงการแจ้งเตือนความสำเร็จ แต่หากพบข้อผิดพลาด ระบบจะบันทึกข้อผิดพลาดและแสดงข้อความแจ้งเตือนใต้ช่องอินพุตก่อนจะคืนสถานะปุ่มให้กลับมาใช้งานได้ปกติในบล็อก finally
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น