About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

%E0%B8%95%E0%B8%A3%E0%B8%A7%E0%B8%88%E0%B9%80%E0%B8%8A%E0%B9%87%E0%B8%84%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B9%83%E0%B8%99%E0%B8%9F%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B8%A1%E0%B8%81%E0%B9%88%E0%B8%AD%E0%B8%99%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B9%84%E0%B8%9B%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A1%E0%B8%A7%E0%B8%A5%E0%B8%9C%E0%B8%A5 %28Form Validation%29 [Article ID : 21]


เรื่อง : การทำ Form Validation ด้วยโปรแกรม Dreamweaver

เว็บโปรแกรมเมอร์ที่ต้องทำการเขียนโปรแกรมต่าง ๆ บนเว็บ มักต้องการเขียนโปรแกรมเพื่อให้ผู้ใช้ได้กรอกข้อมูลที่ต้องการเข้ามาอย่างครบถ้วน แต่ก็มี User บางรายไม่ค่อยชอบกรอกข้อมูลให้ครบตามที่กำหนด อาจจะเว้นไปบ้าง 2-3 ฟิลด์/อินพุทข้อมูล แล้วกดส่งข้อมูลเลยทันที และถ้าฟิลด์ข้อมูลที่เขาเว้นไว้นั้นสำคัญ ซึ่งระบบโปรแกรมต้องการนำมาใช้งาน แต่เขาไม่กรอกมาละจะทำอย่างไร...?? มันก็ต้องมีการบังคับให้กรอกกันบ้างจริงไหม ?
...บทความนี้จึงมาแนะนำกัน ซึ่งการตรวจสอบว่าผู้ใช้งานกรอกข้อมูลมาอย่างถูกต้องครบถ้วนตามที่ระบบต้องการหรือไม่ เราเรียกวีธีการนี้กันว่า Form Validation

วิธีการทำ Form Validation

ให้ทำการสร้าง 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 ที่คีย์บอร์ดเพื่อทำการทดสอบ เมื่อทดสอบจะได้ ดังรูป
หากต้องการแก้ไขข้อความแจ้งเตือน สามารถแก้ไขได้จากโค้ด JavaScript ดังรูป
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

การนำ Code ภาษา HTML/JavaScript แทรกลงใน Web Page

เรื่อง : นำโค้ด HTML หรือ JavaScript แทรกลงในเว็บเพจด้วย Dreamweaver บ้างครั้งเราทำเว็บไซต์ อาจจะต้องมีการไปสมัครเป็นสม...  

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 2

หลังจากที่เราได้ทำการสร้าง Database และ Table ไปแล้วจากตอนที่ 1 ที่ผ่านมา ขั้นตอนต่อไปก็คือ เราต้องทำการสร้างตัว MySql Connection ใ...  

การสร้างข้อความในแบบ Tooltip กับ Dreamweaver (Spry Tooltip, CS Only)

เรื่อง : การสร้างข้อความแบบ Tooltip ด้วยโปรแกรม Dreamweaver *บทความนี้เฉพาะโปรแกรม Dreamweaver เวอร์ชั่น CS5, CS6 สำหรับ CC ไม่มีให้เรียกใ...  

สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้

เรือง :: สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้ (Drag Layer by Dreamweaver)สำหรับบทความนี้เป็นบทความการป...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*