การใช้งาน jQuery Validation Plugin ตอนที่ 1

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

ปัญหานี้จะหมดไปหากท่านใช้ Javascript จริงๆ มันก็ไม่ไช่เรื่องใหม่อะไร กับการนำ Javascript เข้ามาใช้ในการช่วยตรวจเช็คข้อมูลว่ามีความถูกต้องหรือไม่ ส่วนตัวไม่ค่อยชอบ Javascript เท่าไหร่ เพราะไม่ค่อยจะเข้าใจการเรียกใช้งาน หรือแม้แต่การจะเข้าถึง element htm ใดๆ แต่ว่าในปัจจุบันมี Javascrpt Library อย่าง jQuery ออกมาให้ใช้งาน ผมคิดว่ามันใช้งานง่ายขึ้นกว่าเดิม เลยลองหันมาใช้ตัว jQuery Validation Plugin ดู ซึ่งผลก็ออกมา โอเคเลยครับ ยืดหยุ่น มากๆ ซึ่งท่านสามารถ download ได้จาก ที่นี่

ส่วนวิธีการใช้งานนั้นก็มีหลายแบบ วันนี้ผมจะขอเสนอแบบง่ายๆ ก่อนนะครับ

ขั้นตอนแรกก็เรียกไฟล์ jquery ซึ่งสามารถหาโหลดได้จากเว็บของ jquery เลยครับ ชอบเวอร์ชันไหนก็เลือกเลยยยย ของผมใช้ 2.0.3 และเรียกไฟล์ jQuery Validate มาด้วย แบบนี้ครับ

จากนั้นก็ทดสอบ สร้างฟอร์มง่ายๆ แล้วกำหนด id ให้กับฟอร์มนั้นๆ ด้วยนะครับ เพราะเราจะเรียกใช้คำสั่งด้วย id ของฟอร์มที่เราสร้าง แบบนี้ครับ

username : 

email : 

address: 

แล้วมาเรียกใช้ตัว Validate ต่อจาก ฟอร์มที่เราสร้างแบบนี้ครับ

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

ส่วนวันนี้วันนี้ขอจบเพียงเท่านี้นะครับ มีโอกาสว่างเมื่อไหร่จะมาพูดถึงการเรียกใช้งานในแบบอื่นๆ นะครับ