เรื่อง :: ตรวจเช็คข้อมูลในฟอร์มก่อนส่งไปประมวลผล

ผู้ที่เป็นเว็บมาสเตอร์ที่ต้องทำการเขียนโปรแกรมต่าง ๆ บน website ต่าง ๆ มักจะต้องการเขียนโปรแกรมเพื่อให้ผู้ใช้ได้กรอกข้อมูลที่ต้องการเข้ามาอย่างครบถ้วน แต่ก็มี User บางท่านไม่ค่อยชอบกรอกข้อมูลให้ครบตามที่กำหนด อาจจะเว้นไปบ้าง 2-3 ฟิลด์ข้อมูล แต่ถ้าฟิลข้อมูลที่เว้นไปนั้นสำคัญและทางเว็บมาสเตอร์ต้องการให้กรอกละจะทำอย่างไร...?? มันก็ต้องมีการบังคับให้กรอกกันบ้างจริงไหม...!!!
     ครั้งนี้เลยเขียนบทความนี้มาแนะนำการใช้ Dreamweaver ช่วยในการเขียน Script แบบ Java ให้ตรวจเช็คข้อมูลก่อน ก่อนที่จะส่งไปประมวลผลในฝั่ง Server ถ้าท่านใดยังไม่เข้าใจในการทำงานนี้ก็ลอง click ที่ปุ่ม Submit โดยที่ท่านไม่ต้องกรอกข้อมูลใด ๆ ลงในช่อง Input นั่นดูครับ >>>

---

วิธีการทำ >>>

ให้คุณสร้าง Form ที่คุณต้องการขึ้นมาจากโปรแกรมเสียก่อน หลังจากนั้นให้คุณกำหนดค่าต่าง ๆ ที่จะใช้ในฟอร์มของคุณให้เรียบร้อย เช่น การกำหนดชื่อฟิล ชื่อฟอร์ม เป็นต้น เมื่อกำหนดค่าต่าง ๆ ของฟอร์มแล้ว จากนั้นให้คุณเปิดหน้าต่าง Behaviors ขึ้นมาดังรูป Pic.1 ครับ จากนั้นให้คุณ click ไปที่ TAG ของ FORM ซึ่งอยู่ตรง Status Bar ของโปรแกรม จากนั้นให้คุณมาที่หน้าต่าง Behaviors ครับ แล้ว cilck ไปที่เครื่องหมายบวก (+) ดังรูป Pic.1 เช่นเดียวกัน >>>

Pic.1
เมื่อ Click ไปที่เครื่องหมายบวกแล้ว ให้ท่านเลือกไปที่เมนู
Validate Form ครับ

เมื่อเลือกแล้วจะปรากฏหน้าต่างใหม่ขึ้นมาดัง Pic.2 ครับ ที่หน้าต่างนี้ให้เรากำหนดค่าดังนี้ครับ

ที่ช่อง Value ตรงหน้าคำว่า Requited ให้ท่านติ๊กเครื่องหมายถูกลงไป เพราะเป็นการกำหนดให้มีการร้องขอข้อมูลจาก Form Input ต่าง ๆ

จากนั้นที่เมนู Accept ให้ท่านกำหนดค่าไปว่าท่านต้องการข้อมูลประเภทใดจากฟิล Input ที่ท่านสร้างขึ้น เช่น ถ้าท่านต้องการให้ฟิล ๆ นี้สำหรับกรอก E-mail ก็ให้ท่านเลือกไปที่ช่อง E-mail Address เป็นต้น

สำหรับตรงช่องข้อมูลด้านบนจะเป็นชื่อฟิลต่าง ๆ ที่ท่านกำหนดขึ้นตอนที่ท่านสร้างฟอร์ม ถ้าท่านต้องการกำหนดการร้องขอกับฟิลใดก็ให้ท่าน Click ไปที่ฟิลนั้น ๆ ในช่องข้อมูลด้านบน

เมื่อกำหนดเสร็จแล้วก็ Click ที่ OK ครับ

ก็จะกลับมาที่หน้าต่าง Behaviors ให้ท่านดูว่าตรง Events นั้นเป็น OnSubmit หรือไม่ ถ้าไม่ใช่ให้ท่านกำหนดเป็น OnSubmit ด้วยนะครับ การตรวจเช็คฟอร์มถึงจะทำงานได้

ก็เป็นอันเสร็จแล้วครับสำหรับเทคนิคนี้....พบปัญหาในการใช้งานก็สามารถเข้าไปถามได้ที่ Webboard ของเว็บนะครับ.

 

 

 

 

Pic.2

................................................................................................................................................................................