validator - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Wed, 26 Nov 2014 17:02:15 +0000 th hourly 1 https://wordpress.org/?v=6.8.3 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png validator - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 การใช้งาน jQuery Form Validator (ตรวจสอบค่าในฟอร์ม ก่อนบันทึก) https://www.itoffside.com/jquery-form-validator/ https://www.itoffside.com/jquery-form-validator/#comments Wed, 26 Nov 2014 17:01:26 +0000 https://www.itoffside.com/?p=2405 jQuery Form Validator เป็นปลั๊กอิน jQuery ที่สร้างการตรวจสอบฟอร์มโดยวิธีการง่ายๆ ในการตรวจสอบผู้ใช้กรอกค่าข้อมูล โดย jQuery Form Validator ใช้งานผ่านโค็ด html โดยไม่ต้องเขียนโค็ดคำสั่งจาก javascript และการใช้ html ในการตรวจสอบสามารถทำให้หน้าเว็บเพจของคุณเร็วขึ้นอีกเท่าตัว โดยคุณสามารถเรียกใช้โมดูลที...

The post การใช้งาน jQuery Form Validator (ตรวจสอบค่าในฟอร์ม ก่อนบันทึก) first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> 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>

<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>

<link href="validator.css" rel="stylesheet">

 

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

<script>
 $.validate({
 modules: 'security, file',
 onModulesLoaded: function () {
 $('input[name="pass_confirmation"]').displayPasswordStrength();
 }
 });
 </script>

 

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

<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 ตัวอย่างแบบเต็ม ด้านล่าง

<!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>&copy; 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 ตามที่พิมพ์

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

jQuery form validator
jQuery form validator

 

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

jquery-form-validator
jquery-form-validator

 

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

The post การใช้งาน jQuery Form Validator (ตรวจสอบค่าในฟอร์ม ก่อนบันทึก) first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/jquery-form-validator/feed/ 9