Validate Form ด้วย LiveValidation

เวลาสร้างฟอร์มในหน้าเพจให้กรอกข้อมูลอะไรสักอย่าง เราจำเป็นต้องตรวจสอบความถูกต้องของข้อมูลว่าเป็นตามเงื่อนไข หรือ ได้รูปแบบของข้อมูลที่ถูกต้องหรือไม่ เช่นฟอร์มรับสมัคร ฟอร์มกรอกเนื้อหาบล็อก ปกติเราจะตรวจสอบข้อมูลตรงนี้หลักจากที่ซับมิทข้อมูลไปแล้ว ก็ไปใช้ภาษาฝั่งเซอเวอร์ตรวจสอบเช่น php ถ้าข้อมูลไม่ถูกต้องก็ให้ redirect กลับมาที่หน้าฟอร์มใหม่ แต่วิธีนี้ต้องมีการ request ข้อมูลไปก่อนแล้วต้องรอ response กลับมา ถ้ากรอกผิดหลายรอบก็ต้องมานั่งซับมิทใหม่หลายๆรอบ

เราเลยจะใช้ภาษาฝั่ง client อย่าง javascript มาช่วยตรวจสอบข้อมูลของฟอร์มก่อนที่จะซับมิทข้อมูลไป มี library หลายเจ้าที่ช่วยตรงนี้ ที่เอามาให้ดูคือ LiveValidation เป็น เป็น library เล็กๆ มี pattern วิธีใช้ง่ายๆ

ตัวอย่างเช่นจะตรวจสอบว่า text input ที่มี id ชื่อว่า username นี้ต้องมีข้อมูลถ้าไม่มีจะ ซับมิทไปไม่ได้ และขึ้นข้อความบอกว่าข้อมูลไม่ถูกต้องให้เขียน script แบบนี้

var username = new LiveValidation('username');
username.add( Validate.Presence );

จากโค้ด ให้สร้าง object ของ LiveValidation โดยใส่ชื่อ id ของ field ที่จะ validate เป็นพารามิเตอร์ จากนั้นเราจะเพิ่ม เงื่อนไขการตรวจสอบโดยเรียก method add แล้วกำหนดเงื่อนไขโดยใช้ค่าจาก object Validate เช่่น Validate.Presence ตรวจสอบว่าต้องมีข้อมูลกรอกที่ text input นี้

อีกตัวอย่างเป็นการตรวจสอบว่าต้องใส่ข้อมูลในรูปแบบของ email

var email = new LiveValidation('email');
email.add( Validate.Email );

เมื่อเรากรอกข้อมูลถูกต้อง หรือ ไม่ถูกต้อง ตัว LiveValidation จะเพิ่มข้อความบอกไว้หลัง input field โดยครอบอยู่ใน tag span โดยมี class ต่างๆบอกว่าสถานะว่าเป็น valid หรือ invalid เราสามารถจัด style sheet ให้กับข้อความในสถานะต่างๆได้ class ที่บอกสถานะต่างๆมีดังนี้

• LV_validation_message – the class that is added to all validation messages
• LV_valid – the class that is added to a valid message
• LV_invalid – the class that is added to an invalid message
• LV_valid_field – the class that is added to a valid field
• LV_invalid_filed – the class that is added to an invalid field

Reference : http://livevalidation.com/