Jan
19
2012

jQuery Validation Plugin

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

บทความนี้เป็นบทความแรกของปี 2012 ครับ เราจะมาทำความรู้จักกับ Plugin Validation ที่มีประโยชน์สำหรับงานที่ต้องทำเกี่ยวกับ Form ไม่ว่าจะ Form login,Register,Contact หรืออะไรก็แล้วแต่ที่ต้องทำเกี่ยวกับ Web Form แล้วต้องการจะเช็คว่ารูปแบบถูกต้องหรือไม่ กรอกครบหรีือไม่ก็ต้องใช้ plugin Validation ตัวนี้เลยครับ

เอาละเริ่มจากติดตั้ง Plugin Validation กันก่อนเลยโดยไป Download ได้ที่นี่ครับ

1	http://jzaefferer.github.com/jquery-validation/jquery.validate.js

หลังจากที่โหลดมาให้ก็อย่าลืมทำการ include code เข้ามาด้วยนะครับ โดยวางไว้ภายใน Tag Head เช่นเคย

1
2
3
4
5

มาเริ่มกันเลยครับ ผมยกตัวอย่างสักสองสามตัวอย่างให้ดูก่อนนะครับว่าวิธีนำเอา Validation ของ jQuery มาใช้นี้นำมาใช้อย่างไรแบบง่ายๆกันก่อน เริ่มกันที่ทำการเช็คว่า text box หรือ input box ที่เราต้องการตรวจสอบนั้นมีการกรอกข้อมูลหรือเปล่านะครับ

มาดู code validate กันเลย ในการเขียน code นั้นเราจะใช้ ID ของ Tag FORM นะครับใช้ตรวจสอบ

1
2
3
4
5
6
7
8
9
10

<html>
<head>
<script src="jquery-latest.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('#myForm').validate();
});
</script>
</head>

จะเขียนว่าจาก code ด้านบนบรรทัดที่ 7 จะเป็นการเรียกให้ Plugin Validation นั้นทำงานนะครับ

มาดูในส่วนของ BODY กันต่อครับ

1
2
3
4
5
6
7

จาก code form ด้านบนให้สังเกตุบรรทัดที่ 2 นะครับ ผมได้เพิ่ม attribute CLASS ขึ้นมาอีก 1 ตัว นั้นก็เพราะว่าตัว Plugin Validation นั้นหลังจากที่เรากำหนดให้มันทำงานที่ Form ใดแล้วมันก็จะทำการ Scan หา text box ที่มีการสร้าง attribute CLASS ขึ้นมาแล้วมีค่าเท่ากับ “required” เอาไว้มันก็จะทำการตรวจสอบ text box ตัวนั้นให้ ถ้าเกิดเราไม่ได้ใส่เอาไว้มันก็จะไม่ทำการตรวจสอบให้

ตัวอย่าง 1 :

เป็นไงครับง่ายมากเลยใช่ใหมครับสำหรับการนำเอา validation plugin มาใช้งาน plugin ตัวนี้ความสามารถไม่ได้มีเท่านี้นะครับ ยังสามารถลงรายละเอียดลึกๆขึ้น Advance ได้อีกเยอะครับ ผมจะทยอยๆลงให้ได้อ่านกันนะครับ ก่อนจบเนื้อหานี้ผมแถมให้อีกอันครับใช้สำหรับกำหนดว่าให้ text box ของเรานั้นจะต้องกรอกตัวอักษรอย่างน้อยกี่ตัว เช่น จะต้องกรอกอย่างน้อย 2 ตัวขึ้นไป สามารถเขียนได้ง่ายๆดังนี้ครับ

1	<input type="text" name="myText" id="myText" class="required" minlength="2" />

จาก code ด้านบนนะครับ ผมได้เพิ่ม attribute minlength เข้าไปเพิ่ม และกำหนดค่าให้มันด้วยคือ 2 เท่านี้ก็จะสามารถเช็คได้ว่ามีการกรอกหรือพิมพ์ตัวอักษรเข้ามาน้อยกว่า 2 ตัวหรือไม่ ลองทดสอบดูจากด้านล่างนี้ครับ