jump to navigation

jQuery + Validate Plugin เช็คฟอร์มเรื่องง่าย ใครว่ายาก August 7, 2010

Posted by jbanju in Programming Jquery.
trackback

jQuery + Validate Plugin เช็คฟอร์มเรื่องง่าย ใครว่ายาก

วันนี้แนะนำการใช้ jQuery + Validate Form Plugin สำหรับการตรวจสอบค่าในฟอร์ม ว่าถูกป้อนข้อมูลเข้ามาครบหรือยังก่อนที่จะทำการกด submit ซึงปกติแล้วเราอาจจะใช้ JavaScript ในการเช็คซึงถ้าเขียนเองก็อาจจะยุ่งยากไปหน่อย แต่ Validate Form Plugin ช่วยเราได้

เริ่มจากการ download jQuery มาก่อน http://www.jquery.com/
จากนั้นก็ download Validate Plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/

ต่อไปทำการ unzip และนำ jquery-1.3.2.js และ jquery.validate.js ไปไว้ใน folder /js และก็สร้าง file jquery.start.js ขึ้นมาด้วย เพื่อกำหนดค่าเริ่มต้นให้ jQuery ทำงาน โครงมีสร้างของ folder และ file ดังนี้

โครงสร้างของ folder และ file
– /js/jquery-1.3.2.js
– /js/jquery.validate.js
– /js/jquery.start.js
– /css/custom-styles.css
– /example.html

หรือจะ download file ตัวอย่างที่ผมทำไว้ไปดูก่อนก็ได้นะครับ น่าจะเข้าใจง่ายขึ้น
http://www.unzeen.com/download/jquery-css-validation-plugin.zip
จากตัวอย่าง example.html เราจะเห็นว่าถ้าหากว่าต้องการให้ input ตัวไหนทำการ validate เราก็แค่กำหนดให้มี class=”required” เท่านั้น

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: