ตรวจเช็คข้อมูลในฟอร์มก่อนส่งไปประมวลผล (Form Validation) [Article ID : 21]

ให้ทำการสร้าง Form ที่ต้องการขึ้นมาจากโปรแกรม Dreamweaver เสียก่อน หลังจากนั้นให้กำหนดค่าต่าง ๆ ที่จะใช้ในฟอร์มของให้เรียบร้อย เช่น การกำหนดชื่ออินพุท, ชื่อฟอร์ม เป็นต้น เมื่อกำหนดค่าต่าง ๆ ของฟอร์มได้แล้ว ให้ปฏิบัติ ดังนี้
*อ่านการสร้าง Form และ Input ที่นี้ *ตัวอย่าง Form มี 2 อินพุท แต่ละอินพุทกำหนดชื่อ myname, email

1. เปิดหน้าต่าง Behaviors ขึ้นมา (Menu -> Window -> Behaviors)
2. ที่ Form บนหน้าเว็บเพจ ให้ทำการเลือกที่ปุ่ม Submit หรือปุ่มที่ใช้ในการกดเพื่อส่งข้อมูล
3. จากนั้นไปที่หน้าต่าง Behaviors ให้ทำการคลิกที่ Add behaviors (ปุ่มเครื่องหมายบวก + ) แล้วเลือกที่ Validate Form ดังรูป 4. โปรแกรมจะทำการเปิดหน้าต่างขึ้นมาให้เรากำหนดค่า ดังรูป *รายการที่เห็นในส่วนของ Fields: คือ อินพุทและชื่อของอินพุทที่ได้กำหนดไว้กับ Form

5. Input ใดที่ต้องการตรวจสอบ หรือต้องการให้ผู้ใช้กรอก ให้เลือกที่ชื่ออินพุทนั้น แล้วทำการคลิกเลือกที่ออฟชั่น Required ดังรูป *จากรูปอินพุทที่ชื่อ myname มีการตรวจสอบเพื่อให้กรอกข้อมูล ซึ่งจะมี (R) ต่อท้ายชื่ออินพุท

6. หากอินพุทใดมีรูปแบบข้อมูลที่ต้องการตรวจสอบเพิ่มเติม เช่น อินพุทที่ใช้กรอก e-mail ต้องมีรูปแบบอีเมลล์ที่ถูกต้อง ซึ่งนอกจากเราจะเลือกที่ Required แล้ว ให้เราเลือกออฟชั่นในส่วนของ Accept: เพิ่มเติม ดังรูป *จากรูปอินพุทที่ชื่อ email มีการตรวจสอบเพื่อให้กรอกข้อมูล และมีการตรวจสอบรูปแบบข้อมูลแบบ Email address

7. เมื่อกำหนดค่าได้แล้วกดที่ OK เป็นอันเสร็จสิ้นการทำ Form Validation
8. ทำการกดปุ่ม F12 ที่คีย์บอร์ดเพื่อทำการทดสอบ เมื่อทดสอบจะได้ ดังรูป