Apr 18 2010
jQuery Validator the First Step (jQuery Plugins)
เมื่อ web app มีช่องให้ใส่ข้อมูล เช่นการสมัครสมาชิก หรืออะไรก็ตามที่จำเป็นต้องตรวจสอบ ว่าประเภทของข้อมูลถูกต้องหรือไม่ สิ่งเหล่านั้นเราเรียกว่าการ Validate
หลังจากกรอกข้อมูลผิด หรือไม่ครบถ้วน ก็ควรจะมีการแจ้งเตือนว่าควรจะกรอกข้อมูลอย่างไร
มีหลายวิธีที่สามารถจัดการปัญหานี้ได้ เช่น
1. javascript เพียวๆ
2. ใช้ code behind ตรวจสอบ
3. ใช้ tools ในการตรวจสอบ (ซึ่งก็ใช้ javascript ตรวจสอบเป็นส่วนใหญ่)
ในที่นี้ผมเลือกใช้ jQuery Validator (@krucode แนะนำมา) ใช้งานง่าย สะดวก รวดเร็ว แทบจะไม่ต้องทำอะไรเลย เรามาลองดูตัวอย่างกันครับ Simple Validator สามารถ view source เพื่อดู code ได้ (เป็น html สามารถดูตัวอย่างได้ง่าย)
มีวิธีการทำงานง่ายๆตามนี้เลยครับ
1. เข้าไปยังเว็บผู้ให้ข้อมูลเลยครับ jQuery Validator เพื่อดูข้อมูล และ download ไฟล์ jQuery Validator Plugins และ jQuery (ในที่นี้อาจมี version ใหม่กว่านี้ก็สามารถใช้งานได้)
2. include เข้ามาใน page
5. ใส่ script นี้เพื่อให้ jQuery Validator ทำงาน (ชื่อ form สามารถเปลี่ยนได้ แต่ต้องตรงกันกับ form ที่ใช้ในการ validate
4. หาก field ไหนต้องการ validate ก็ให้ใส่ class กำกับไปด้วย เช่น
ที่สำคัญของ textbox ตัวนี้คือ name เพราะ jQuery Validator ใช้ name เป็น key ในการ validate ดังนั้นห้าม name ซ้ำกัน และต้องระบุ name ทุกครั้ง
จะเห็นว่า field นี้ต้องการให้ใส่ข้อมูล และ ต้องเป็นประเภท email ในที่นี้ class เบื้องต้นที่สามารถใช้ได้ง่ายๆมีดังต่อไปนี้
ความหมายจะค่อนข้างตรงกับชื่อ class ให้ลองดูครับ
5. ปุ่ม submit เพื่อให้ตรวจสอบข้อมูลก่อนทำงาน
นี่เป็นวิธีการใช้งานเบื้องต้น ใช้สำหรับ page ที่มี 1 submit form และ 1 ปุ่ม เท่านั้นครับ
หวังว่าข้อมูลนี้จะเป็นประโยชน์ครับ
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.