validate form โดย prototype

พอดีว่าต้องทำ campaign ให้กับ pocket pc phone ยี่ห้อดังยี่ห้อหนึ่ง ที่มีลักษณะว่าเอาเครื่องเก่าไปแลกซื้อเครื่องใหม่ ในราคาที่ลดสูงสุดถึงกว่า 6000 บาท ทีนี้มันก็ต้องมีส่วน form สำหรับลงทะเบียนด้วย และแบบว่าระดับนี้ทั้งที ทำ form ธรรมดา แล้ว submit ไปแล้วมัน error ก็ดูไม่ดี ทำทั้งทีต้องให้สวยงามอลังการไปเลยแล้วกัน

ว่า แล้วก็เลยต้องทำส่วน validate ขึ้นมา ซึ่งส่วน validate นี้อาศัย prototype validate เข้ามาช่วยงาน มันทำได้ง่ายมากมาย ลักษณะก็เป็น AJAX นั่นเอง แต่ว่าการเขียนโค้ด ไม่จำเป็นต้องเขียน javascript code เลยแม้แต่จุดเดียว!! (สำหรับลูกเล่นพื้นฐาน)

เพราะว่าตัวอย่างที่ผม โหลดมาดูนั้น ทั้งหน้าก็มีแต่ส่วน link javascript เข้ามาแล้วก็ส่วนของ xhml เท่านั้นก็เสร็จแล้ว สามารถ validate ได้เลย เลยทึ่งว่ามันฉลาดขนาดนั้นเลยเหรอ (แต่จะมีส่วนเขียนเพิ่มสำหรับการ validate password ด้วย ที่อยู่ด้านล่าง)

สำหรับตัวอย่างการ validate ข้อมูล ดูได้ที่นี่ครับ http://tetlaw.id.au/upload/pages/really-easy-field-validation/ ถ้า view source code ดูจะพบว่าใช้งานง่ายมากๆ

ถ้าใครเอาไปใช้งานให้ง่ายสุดๆ ก็ save หน้าตัวอย่างลงเครื่องเลยก็ได้ครับ เพราะว่าเค้าเขียน validate ในรูปแบบต่างๆเอาไว้ให้น่าจะครบถ้วนแล้ว อย่างน้อยก็พอใช้เกือบทั้งหมดแล้วล่ะครับ อันนี้ผมนั่งไล่ดูแล้ว

สำหรับเงื่อนไขการ validate จะปรากฏเป็นชื่อ class ครับลองสังเกตุดีๆเช่น
<input name="field111" id="field111" class="required validate-date" title="Enter validate date" />
อันนี้ใช้ class require validate-date ซึ่งแปลว่า จำเป็นต้องกรอก และต้องกรอกในรูปแบบ วันที่ด้วย

สำหรับclass ทั้งหมดที่ใช้ validate ก็มีดังนี้ครับ

• required = จะต้องกรอกด้วย
  
• validate-number = ข้อมมูลเป็นลักษณะตัวเลข เช่น 23, 24.09 อะไรแบบนี้ คือจำนวนเต็มหรือทศนิยมได้
  
• validate-digits = ช้อมูลต้องเป็นตัวเลขจำนวนเต็มเท่านั้น
  
• validate-alpha = มีแต่ตัวหนังสือเพียงอย่างเดียว
  
• validate-alphanum = ตัวหนังสือและตัวเลข(ต้องมีทั้งสองอย่าง)
  
• validate-date = รูปแบบวันที่
  
• validate-email = ต้องเป็น email ที่ถูกต้อง
  
• validate-url = ต้องเป็น URL ที่ถูกต้อง
  
• validate-date-au = วันที่ในรูปแบบ dd/mm/yyyy
• validate-currency-dollar = กรอกค่าเงินในรูปแบบ $
  
• validate-selection = บังคับว่าต้องเลือกรายการ ใน selection list อย่างน้อย 1 รายการ(ที่ไม่ใช่รายการแรก)
  
• validate-one-required = ต้องเลือกปุ่ม option 1 อันจากทั้งหมดที่มีให้เลือก

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

การเพิ่มลูกเล่นก็คือการสร้าง class ใหม่ขึ้นมา แล้วเราก็สร้าง javascript เพิ่มเติมขึ้นมา

<script type="text/javascript">
var valid = new Validation('form-id', {onSubmit:false});
var result = valid.validate();
</script>

ผมจะสมมุติการกรอกเบอร์โทรมือถือของไทยนะครับ ที่ต้องกรอกเป็น 0888888888 อย่างนี้ ก็จะเขียนได้แบบนี้ครับ
<script type="text/javascript">
var valid = new Validation('test', {onSubmit:false});
var result = Validation.add('validate-telephonenumber', 'กรอกไม่ถูกต้อง', {
pattern : new RegExp("^08[0-9]{8}$")
});
</script>
กรณีนี้ผมมี form id ชื่อ test แล้ว class ที่ผมเขียนใหม่ชื่อ validate-telephonenumber เท่านี้เองครับ เสร็จแล้ว ง่ายไหมครับ


สำหรับ option ที่ใช้ validate ทั้งหมด มีดังนี้ครับ
Validation.add('class-name', 'Error message text', {
pattern : new RegExp("^[a-zA-Z]+$","gi"), // ใช้งานแบบ regular expression
minLength : 6, // ความยาวขั้นต่ำ
maxLength : 13, // ความยาวสูงสุดของตัวหนังสือ
min : 5, // ค่าที่น้อยที่สุด ในกรณีที่เป็ฯตัวเลข
max : 100, // ค่าที่มากที่สุดในกรณีที่เป็นตัวเข
notOneOf : ['password', 'PASSWORD'], // ค่าที่กรอกต้องไม่เป็น หนึ่งในตัวเลือกนี้
oneOf : ['fish','chicken','beef'], // ค่าที่กรอก ต้องเป็นค่าใดค่าหนึ่งในตัวเลือกนี้
is : '5', // จะต้องเป็นค่านี้
isNot : 'turnip', // ต้องไม่เป็นค่านี้
equalToField : 'password', // จะต้องมีค่าซ้ำกัน field ที่ชื่อ
notEqualToField : 'username', // จะต้องมีค่าไม่เท่ากัน field ที่ชื่อ
include : ['validate-alphanum'] // เอาการ validate ของเดิมที่มีมาให้เอามาใช้ ต้องระวังการเกิด infinity loop ด้วยนะครับ
});

เท่านี้เราก็มีส่วน validate form มาใช้แล้วครับแบบง่ายๆและเร็วๆเลย


หลังๆ นี้ผมพยายามหาวิธีทางการเขียนเว็บให้รวดเร็วที่สุด โดยอาศัยเครื่องมือช่วยเหลือต่างๆที่มีอย่างมากมายบนโลกของเรานี้เอง เพื่อลดขั้นตอนการทำงานครับ และในส่วน phase ต่อไปของการพัฒนาตัวผม เองจะเป็นการพัฒนาส่วนของ user interface ให้ใช้งานได้ง่ายและอิสระมากที่สุด (แต่ส่วนนี้จะเป็นส่วนที่เสียเวลาและยุ่งยากมากที่สุด) ก็ติดตามต่อไปได้ครับ(ถ้ามีเวลาและโอกาส)

อ้อ คู่มือแบบภาษาอังกฤษแบบเต็มๆดูได้ที่นี่ครับ http://tetlaw.id.au/view/javascript/really-easy-field-validation

อ้อ อีกเรื่องที่เกือบลืมไป ว่าการ validate ส่วนนี้ไม่ได้หมายความว่าหน้าที่รับ input เหล่านี้จะปลอดภัยนะครับ เพราะว่าส่วนนี้มีผลกระทบเฉพาะ user เท่านั้น สำหรับ robot และ hacker ไม่ได้รับผลกระทบครับ ดังนั้นหน้าที่รับข้อมูลก็จะต้องทำการ validate ข้อมูลซ้ำอีกทีหนึ่งด้วยภาษาสคริปที่ท่านใช้งาน

พึงระลึกเสมอว่า input = devil แต่เราเลี่ยงไม่ได้ที่จะเปิดประตูต้อนรับดังนั้นเราก็ต้อง safe ตัวเองโดยการ scan ให้ดีล่ะครับ