jQuery form validator

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

Share Button

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 ด้วยครับหากผู้อ่านต้องการที่จะกรองข้อมูลในแบบอื่นๆสามารถสอบถามหรืออ่านได้จากเว็บนี้ได้ครับ

benext About benext
โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Share Button

Published by

benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

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

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

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

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

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

    ขอบคุณครับ

    1. เข้าไปแก้ไขที่ ไฟล์ jquery.form.validator.min.js ครับ พิมพ์คำ error ที่ต้องการเปลี่ยน แล้วค้นหาครับ

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

    ขอบคุณครับ

Leave a Reply

Your email address will not be published. Required fields are marked *