
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>
1 2 3 4 |
<script src="jquery.min.js"></script> <script src="jquery.form.validator.min.js"></script> <script src="security.js"></script> <script src="file.js"></script> |
?โปรดอย่าลืม กรณีที่มีการใช้ jQuery ไปแล้วห้ามนำมา include ใช้อีกเป็นอันขาด และสคริปต่างๆที่จำเป็นต้องใช้ jQuery จะต้อง include ด้านล่าง jQuery เท่านั้น!
2. นำ Code css ไปวางไว้ภายในส่วนของ <head></head>
1 |
<link href="validator.css" rel="stylesheet"> |
3. นำ Code javascript ไปวางไว้ในส่วนบนของ </body>
1 2 3 4 5 6 7 8 |
<script> $.validate({ modules: 'security, file', onModulesLoaded: function () { $('input[name="pass_confirmation"]').displayPasswordStrength(); } }); </script> |
4. สร้างฟอร์มบันทึกข้อมูลตามตัวอย่างโค๊ดด้านล่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<form class="form-horizontal" role="form" action="result.php" method="post" id="form"> <div class="form-group"> <label class="col-sm-3 control-label">อีเมล์</label> <div class="col-sm-9"> <input type="email" class="form-control" data-validation="email"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รหัสผ่าน</label> <div class="col-sm-9"> <input type="password" class="form-control" name="pass_confirmation" data-validation="strength" data-validation-strength="2"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รหัสผ่าน อีกครั้ง</label> <div class="col-sm-9"> <input type="password" class="form-control" data-validation="confirmation" name="pass"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รูปภาพประจำตัว</label> <div class="col-sm-9"> <input data-validation="mime size" data-validation-allowing="jpg, png" data-validation-max-size="512kb" type="file"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รายละเอียด</label> <div class="col-sm-9"> <textarea class="form-control" data-validation="required"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" data-validation="required" data-validation-error-msg="ต้องยอมรับเงื้อนไข"> ยอมรับเงื้อนไข </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">บันทึกข้อมูล</button> </div> </div> </form> |
ดู code ตัวอย่างแบบเต็ม ด้านล่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>jQuery Form Validator - itOffside.com</title> <!-- Bootstrap core CSS --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="theme.css" rel="stylesheet"> <link href="validator.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="jquery.form.validator.min.js"></script> <script src="security.js"></script> <script src="file.js"></script> </head> <body> <div class="container"> <div class="header"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation" class="active"><a href="index.php">หน้าแรก</a></li> <li role="presentation"><a href="https://www.itoffside.com/">เกี่ยวกับเรา</a></li> <li role="presentation"><a href="https://www.itoffside.com/">ติดต่อเรา</a></li> </ul> </nav> <h3 class="text-muted">Demo jQuery Form Validator</h3> </div> <div class="row marketing"> <div class="col-lg-12"> <form class="form-horizontal" role="form" action="result.php" method="post" id="form"> <div class="form-group"> <label class="col-sm-3 control-label">อีเมล์</label> <div class="col-sm-9"> <input type="email" class="form-control" data-validation="email"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รหัสผ่าน</label> <div class="col-sm-9"> <input type="password" class="form-control" name="pass_confirmation" data-validation="strength" data-validation-strength="2"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รหัสผ่าน อีกครั้ง</label> <div class="col-sm-9"> <input type="password" class="form-control" data-validation="confirmation" name="pass"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รูปภาพประจำตัว</label> <div class="col-sm-9"> <input data-validation="mime size" data-validation-allowing="jpg, png" data-validation-max-size="512kb" type="file"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">รายละเอียด</label> <div class="col-sm-9"> <textarea class="form-control" data-validation="required"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" data-validation="required" data-validation-error-msg="ต้องยอมรับเงื้อนไข"> ยอมรับเงื้อนไข </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">บันทึกข้อมูล</button> </div> </div> </form> </div> </div> <footer class="footer"> <p>© itOffside.com 2014</p> </footer> </div> <!-- /container --> <script> $.validate({ modules: 'security, file', onModulesLoaded: function () { $('input[name="pass_confirmation"]').displayPasswordStrength(); } }); </script> </body> </html> |
อธิบาย 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 ตามที่พิมพ์
ผลลัพธ์ที่ได้

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

สำหรับบทความนี้ เหมาะสำหรับนำไปใช้งานในกรณีที่ต้องการตรวจสอบข้อมูลก่อนบันทึกลงฐานข้อมูล โดยไม่ต้องมีการโหลดหน้าเว็บเพจก่อน และต้องขอขอบคุณแหล่งที่มา http://formvalidator.net ด้วยครับหากผู้อ่านต้องการที่จะกรองข้อมูลในแบบอื่นๆสามารถสอบถามหรืออ่านได้จากเว็บนี้ได้ครับ
ขอตัวอย่างเลขทศนิยมได้เปล่าครับ
input data-validation=”number” data-validation-allowing=”float” type=”text”
ขอตัวอย่างการใช้ input type text กำหนดจำนวนตัวอักษรที่กรอกได้ หรือ จำเป็นต้องกรอกตัวอักษร เท่านี้ เท่านั้น ได้ไหมครับ
ใช้ Regexp ครับ
ตัวอย่าง ใน input tag
data-validation=”custom” data-validation-regexp=”^([a-z]+)$
หมายถึงเริ่มต้น a-z และลงท้ายด้วย a-z
สามารถศึกษา Regexp ได้ที่ http://www.w3schools.com/jsref/jsref_obj_regexp.asp
ถ้าต้องการเปลี่ยน คำที่ error เช่น You have not given a correct e-mail address ต้องทำยังไงครับผม
เพราะบางที มีฟิวที่เพิ่มมา แล้วต้องการแจ้ง error คำนั้นๆ อะครับ
ขอบคุณครับ
เข้าไปแก้ไขที่ ไฟล์ jquery.form.validator.min.js ครับ พิมพ์คำ error ที่ต้องการเปลี่ยน แล้วค้นหาครับ
กรณีที่ผมต้องการเช็คไฟล์ docx , xlsx , rar , zip ,pdf ต้องทำอย่างไรครับ พยายามแล้วไม่สำเร็จ
ขอบคุณครับ
อ่านเพิ่มเติมที่ http://www.formvalidator.net/#file-validators_type
มีตัวอย่างใช้คู่กับ ajax ไหมครับ