Really Simple Validation
หลายๆคนคงเคยเขียน validation ผ่าน js ซึ่งตามปกติแล้ว เรามักจะเขียน Rule ที่ละตัวๆ แล้วก็เขียนมันซ้ำไปซ้ำมาอยู่นั่นล่ะ เรียกว่าเป็นงาน Routine ที่น่าเบื่อสุดๆ ไปเลย ไหนจะ E-mail, ตัวเลข, ค่าว่าง, ภาษา, custom และอีกมากมายตามแต่จะรังสรรค์กันมา
ถามหน่อยเหอะ “ไม่เบื่อเหรอ” ถ้าคำตอบว่า เบื่อ ลองมาดูการ validate ผ่าน jQuery plugin กันหน่อยเป็นไง ซึ่งตามที่ผมลองเล่นมา jQuery จะมี plugin ประเภทนี้ อยู่เพียบเลย แต่ผมให้แค่ 3 ตัว ก็คือ
bassistance.de
- ตัวนี้ดีมากครับ ครบเครื่อง validate ได้ทุกรูปบบ ใช้ in-line code ได้ด้วย แต่ config ยากนิดนึง ต้องใช้เวลาในการทำความเข้าใจ
Consulenza-web.com
- ตัวนี้ใช้ง่ายที่สุดใน 3 ตัว ไม่ต้องศึกษาอะไรเลย แต่ข้อเสียคือ มันเป็นการ validation แบบ Type Watch คือ มันจะไม่มีตัวอะไรปรากฏ ถ้าเราทำการพิมพ์ไม่ถูกตาม Rule
Really Simple Validation (RSV)
- ตัวนี้ค่อนข้างครบเครื่อง ใช้งานง่าย Custom Function ได้ แต่เสียดายที่มันมีการเขียนโคด แบบ in-line เราต้องระบุ Rule ให้ครบก่อน
*** รูปแบบการเขียน in-line คือระบุเข้าไปใน input ตรงๆ เช่น
-
<input id="cemail" name="email" class="{required:true, email:true, messages:{required:’Please enter your email address’, email:’Please enter a valid email address’}}"/>
เอาล่ะๆ แต่ตัวที่จะมาพูดถึงวันนี้ก็คือตัวที่ 3 นั่น เอง ที่มีชื่อว่า Really Simple Validation (RSV) ซึ่งตัวนี้จะเป็น validation plugin ที่มีความสารถครบ ที่สำคญยังสารถ custom rule ได้เองอีก นับว่าเป็น plugin ที่มีประโยชน์ทีเดียว และเพื่อไม่ให้เกิดการ Duplicate Content เอาเป็นว่าไปดู Demo ที่เวบมันเอาเองเลยละกัน 555
Demostration Page
ซึ่งการใช้งานจะเป็นรูปแบบที่เราจะต้องทำการ Define Rules และ Messages เตรียมไว้ให้ input ก่อน ตัวอย่างเช่น (copy มา)
-
$(document).ready(function() {
-
$("#demo_form1").RSV({
-
onCompleteHandler: myOnComplete,
-
rules: [
-
"required,first_name,Please enter your first name.",
-
"required,last_name,Please enter your last name.",
-
"required,email,Please enter your email address.",
-
"valid_email,email,Please enter a valid email address.",
-
"required,any_integer,Please enter your age.",
-
"digits_only,any_integer,The age field may only contain digits.",
-
"required,marital_status,Please enter your marital status."
-
]
-
});
-
});
ซึ่งโดย default จะเป็นการ Alert ธรรมดาๆ แต่ถ้าอยากให้มัน Display มาที่หน้าแทนการ alert ก็แค่เพิ่ม option ไปไม่กี่ตัวเช่น
displayType: “display-html”
errorFieldClass: “errorFieldDemo2″
จะเป็นระบุถึง DOM ตัวที่จะแสดง Error และยังสามารถกำหนด Class ให้มันได้อีกด้วย
โดยที่ตัวอย่าง Rules เราสามารถดูได้ที่หน้านี้
All Rules
รูปแบบก็คือ
rules.push(“required,user_name,This field is required.”);
1. Rule
2. Input Field Name
3. Message
การใช้งานก็ไม่ยากอะไร ยังไงถ้าสนใจก็ลองไป หาดาวน์โหลดมาใช้ได้จากลิ้งก์ที่ให้ไว้นะครับ
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ขอบคุณครับ
สุดยอดมากเลยครับ ขอบคุณมากพี่Tee++ ผม ของดีจากเว็ปพี่เยอะมาก
ตั้งแต่ url friendly
การทำ cache
ADODB
ขอให้มีบทความดีๆ มาอีกนะครับ ^_^ ขอบคุณมากๆครับ
[...] plugin ของ jQuery ที่ชื่อว่า Really Simple Validation ซึ่งก็เอาไว้ใช้ทำงาน validate ข้อมูลจาก [...]
ขอบคุณมากครับ