การใช้งาน jQuery Form Validator (ตรวจสอบค่าในฟอร์ม ก่อนบันทึก)

jQuery form validator

jQuery Form Validator เป็นปลั๊กอิน jQuery ที่สร้างการตรวจสอบฟอร์มโดยวิธีการง่ายๆ ในการตรวจสอบผู้ใช้กรอกค่าข้อมูล โดย jQuery Form Validator ใช้งานผ่านโค็ด html โดยไม่ต้องเขียนโค็ดคำสั่งจาก javascript และการใช้ html ในการตรวจสอบสามารถทำให้หน้าเว็บเพจของคุณเร็วขึ้นอีกเท่าตัว โดยคุณสามารถเรียกใช้โมดูลที่คุณต้องการได้อย่างอิสระ เช่นต้องการ ให้กรอกเฉพาะตัวเลขเท่านั้น และ มีความยาว 3 ตัวอักษร เป็นต้น ซึ่งในบทความนี้ผมใช้ ฺBootstrap css framework ในการสร้างฟอร์ม

ดู demo ตัวอย่าง
http://sysapp.itoffside.com/jquery-form-validator/

ดาวน์โหลด Source code ตัวอย่าง
http://www.mediafire.com/download/te468g7h6mg9w28/jquery-form-validator.rar

 

ดาวน์โหลดไฟล์ที่จำเป็นต้องใช้งาน
1. โหลดไฟล์ bootstrap ที่นี้ ดาวน์โหลด
2. โหลดไฟล์ jQuery ที่นี้ ดาวน์โหลด
3. โหลดไฟล์ jQuery.form.validator ที่นี้ ดาวน์โหลด
4. โหลดไฟล์ jQuery Security.js ที่นี้ ดาวน์โหลด
5. โหลดไฟล์ jQuery file.js ที่นี้ ดาวน์โหลด
6. โหลดไฟล์ validator.css ที่นี้ ดาวน์โหลด

ในการติดตั้งผมไม่ขออธิบายการติดตั้ง css bootstrap ซึ่งการติดตั้งการใช้งาน bootstrap นั้นมีวิธีการที่ง่ายและผู้อ่านสามารถทำตามเว็บหลักได้ที่ getbootstrap.com

การติดตั้ง
1. นำ code javascript ไปวางไว้ภายในส่วน ของ <head></head>

?โปรดอย่าลืม กรณีที่มีการใช้ jQuery ไปแล้วห้ามนำมา include ใช้อีกเป็นอันขาด และสคริปต่างๆที่จำเป็นต้องใช้ jQuery จะต้อง include ด้านล่าง jQuery เท่านั้น!

 

2. นำ Code css ไปวางไว้ภายในส่วนของ <head></head>

 

3. นำ Code javascript ไปวางไว้ในส่วนบนของ </body>

 

4. สร้างฟอร์มบันทึกข้อมูลตามตัวอย่างโค๊ดด้านล่าง

 

ดู code ตัวอย่างแบบเต็ม ด้านล่าง

 

อธิบาย code
1. ฟอร์มมีการตรวจสอบ
– data-validation=”email” หมายถึง ตรวจสอบอีเมล์
– data-validation=”strength” data-validation-strength=”2″ หมายถึง รหัสผ่าน ต้องเป็นรหัสผ่านที่เดายาก
– data-validation=”confirmation” หมายถึง ยืนยันรหัสผ่าน
– data-validation-allowing=”jpg, png”? หมายถึง อัพโหลดรูปภาพเฉพาะนามสกุล jpg และ png
– data-validation-max-size=”512kb หมายถึง จำกัดขนาดไฟล์ห้ามเกิน 512 kb.
– data-validation=”required” หมายถึง ตรวจสอบค่าว่าง
– data-validation-error-msg=”ต้องยอมรับเงื้อนไข” หมายถึง แสดงข้อความ error ตามที่พิมพ์

ผลลัพธ์ที่ได้

jQuery form validator
jQuery form validator

 

หากทำการกรอกข้อความเรียบร้อยและถูกต้องจะปรากฎดังรูปภาพด้านล่าง

jquery-form-validator
jquery-form-validator

 

สำหรับบทความนี้ เหมาะสำหรับนำไปใช้งานในกรณีที่ต้องการตรวจสอบข้อมูลก่อนบันทึกลงฐานข้อมูล โดยไม่ต้องมีการโหลดหน้าเว็บเพจก่อน และต้องขอขอบคุณแหล่งที่มา http://formvalidator.net ด้วยครับหากผู้อ่านต้องการที่จะกรองข้อมูลในแบบอื่นๆสามารถสอบถามหรืออ่านได้จากเว็บนี้ได้ครับ

You May Also Like

About the Author: Onmobile

โปรแกรมเมอร์
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tantai
Tantai
10 years ago

ขอตัวอย่างเลขทศนิยมได้เปล่าครับ

seksun
seksun
9 years ago

ขอตัวอย่างการใช้ input type text กำหนดจำนวนตัวอักษรที่กรอกได้ หรือ จำเป็นต้องกรอกตัวอักษร เท่านี้ เท่านั้น ได้ไหมครับ

Natee
Natee
9 years ago

ถ้าต้องการเปลี่ยน คำที่ error เช่น You have not given a correct e-mail address ต้องทำยังไงครับผม

เพราะบางที มีฟิวที่เพิ่มมา แล้วต้องการแจ้ง error คำนั้นๆ อะครับ

ขอบคุณครับ

Kawanchai
Kawanchai
8 years ago

กรณีที่ผมต้องการเช็คไฟล์ docx , xlsx , rar , zip ,pdf ต้องทำอย่างไรครับ พยายามแล้วไม่สำเร็จ

ขอบคุณครับ

Pasakorn
Pasakorn
8 years ago

มีตัวอย่างใช้คู่กับ ajax ไหมครับ