jquery validator ตรวจสอบฟอร์มฉบับเทพมาเอง
ปลั๊กอินที่ใช้สำหรับตรวจสอบข้อมูล ของ jquery นั้นมีมากมายเสียเหลือเกิน คุณตี๋ เจ้าคุณปู่แห่ง jquerytips.com ได้เคยเขียนบทความ jQuery Validation ครบทุกเม็ดในการ validate นั่นก็เป็นตัวตรวจสอบความถูกต้องของข้อมูลในฟอร์ม ตัวหนึ่งที่เด็ดดวงเอามากๆ
วันนี้ผมไปเจอตัว validate อีกตัวหนึ่งที่เจ้าของเขาทำเสร็จแล้ว แต่ว่ายังไม่ได้เขียนอธิบายการใช้งาน ทำไว้แต่ตัวอย่างการใช้งาน ผมเห็นว่ามันน่าสนใจดี ก็เลยเอามาเขียนอธิบายเสียเลย
ดาวน์โหลดซ้อสต์ | Live Demo (คลิกปุ่มซับมิต แล้วจะเห็นผล)
หลังจากที่ท่านดาวน์โหลด ซ้อสต์โค้ดมาในนั้นจะมีตัวอย่างอยู่ด้วย ทีนี้เรามาดูวิธีการใช้งานกันดีกว่า
ก่อนอื่น include ไฟล์ที่จำเป็นเข้ามาก่อน
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validationEngine.js"></script> <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
ต่อไปก็แค่เซ็ต ให้มัน validate โดยกำหนด เป็นคลาส ของตัวคอนโทรล ปลั๊กอินตัวนี้ มันจะเช็กตอนซับมิตฟอร์ม โดยอัตโนมัติ
<form action="" method="post" name="form1" id="form1"> <input name="username" type="text" class="validate[required]" /> <input name="" type="submit" value="submit" /> </form>
โค้ดทั้งหมดจะเป็นดังนี้ :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validationEngine.js"></script> <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" /> <title>Validator</title> </head> <body> <form action="" method="post" name="form1" id="form1"> <input name="username" type="text" class="validate[required]" /> <input name="" type="submit" value="submit" /> </form> </body> </html>
ท่านจะเห็นว่าในเท็กบ้อก ผมกำหนด class = validate[required] เวลาฟอร์มถูกซับมิต ตัวปลั๊กอินมันจะมามองหา class validate เมื่อเจอ มันก็จะมองต่อไปว่า จะให้มัน validate ตามกฎไหน ซึ่งก็คือคำที่อยู่ระหว่างเครื่องหมาย [ ]
ในกรณีที่ท่านต้องการให้ตรวจสอบ มากกว่า 1 เงื่อนไข ให้คั่นแต่ละเงื่อนไข ด้วย ,(comma) เช่น
<input name="username" type="text" class="validate[required,length[0,100]]" />กฎในการตรวจสอบทั้งหมด มีดังนี้
- required : ต้องป้อนข้อมูล
- length[0,20] : ป้อนข้อมูลได้ตั้งแต่ 0 – 20 ตัวอักษร (ตัวเลข ในช่อง [] ไปเปลี่ยนเอา )
- custom[noSpecialCaracters] : ห้ามป้อนอักขระพิเศษ เช่น . – ; $ เป็นต้น
- custom[onlyLetter] : ป้อนได้เฉพาะตัวหนังสือภาษาปะกิดเท่านั้น
- custom[onlyNumber] : ป้อนได้เฉพาะตัวเลข
- custom[email] : ป้อนอีเมล์ให้ถูกต้อง
- custom[date] : ต้องป้อนข้อมูลวัน ให้อยู่ในฟอร์แมต YYYY-MM-DD
- custom[telephone] : ป้อนเบอร์โทรศัพท์ให้ถูกต้อง อันนี้เป็นฟอร์แมตของ พี่กันเขานะครับ อย่าเอาไปใช้เลย
- minCheckbox[2] : เช็กเลือกเช็กบ้อกได้สูงสุด 2 ตัว (ตัวเลข ในช่อง [] ไปเปลี่ยนเอา ) ใช้กับเช็กบ้อกเท่านั้น
- confirm[password] : ค่าที่ป้อนในตัวนี้เท่ากับค่าที่ป้อนในเท็กบ้อกที่ชื่อ password หรือไม่ (id ของคอนโทรล ในช่อง [] เปลี่ยนเอา)
เอาละครับเพื่อความเข้าใจมากขึ้น ผมจะแสดงตัวอย่างการใช้งานเพิ่มเติม
ต้องป้อนข้อมูล อีเมล์
<input name="textbox" type="text" class="validate[required,custom[email]]" />ต้องป้อนข้อมูลอย่างน้อย 10 ตัว มากสุดได้ 100 ตัว และป้อนได้เฉพาะตัวหนังสือเท่านั้น
<input name="textbox" type="text" class="validate[required,length[10,100],custom[onlyLetter]" />ต้องป้อนข้อมูล ที่เป็นตัวเลขเท่านั้น
<input name="textbox" type="text" class="validate[required,custom[onlyNumber]" />ช่องยืนยันรหัสผ่าน ต้องป้อนให้ตรงกับรหัสผ่าน
<input type="password" name="yourpassword" id="yourpassword" /> <input type="password" name="passwordConfirm" id="passwordConfirm" class="validate[required,confirm[yourpassword]" />
เช็กบ้อก 3 ตัวนี้ คุณเลือกได้แค่ 2 ตัวนะ
<input class="validate[minCheckbox[2]]" type="checkbox" name="checkboxgroupe" value="5"> <input class="validate[minCheckbox[2]]" type="checkbox" name="checkboxgroupe" value="3"/> <input class="validate[minCheckbox[2]]" type="checkbox" name="checkboxgroupe" value="9"/>
ขอให้บุญที่ได้จากการถ่ายทอดปัญญา สู่บุคคลอื่น ได้ส่งผลให้ข้าพเจ้ามีปัญญา และจิตใจที่เข็มแข็ง ต่อสู้กับอุปสรรค์ได้อย่างไม่ย่อท้อ ด้วยเถิด สาธุ
credit : http://www.position-relative.net/
บทความน่าสนใจ
ผู้เขียน: วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
เว็บไซต์ :http://www.select2web.com
งานเล็กๆก็ยิ่งใหญ่ได้ ถ้าอยู่ในที่ๆเหมาะสม
ขอบคุณครับสำหรับบทความดีๆครับ เดี๊ยวลองเล่นดูก่อนครับอันนี้น่าสนใจมากๆครับ
ไม่เข้าใจตรงไหน คุยกันนะครับ
ขอบคุณครับสำหรับบทความดีๆครับ
validator ตัวนี้ใช้ง่ายได้ค่อนข้างง่าย และสะดวกมากมากครับ โดยส่วนตัวนะ ผมว่าเจ้าของ plugins ตัวนี้คงได้ idea มาจาก jquery.validator (ตัวเดียวกับ ที่คุณตี๋ เขียนแนะนำไว้ในบทความ)เพียงแต่ว่า นำมา implement ใหม่ให้ใช้งานได้ง่ายขึ้น ถ้าเอาแบบ validate แบบง่ายๆ ไม่มีเงื่อนไขอะไรมากมายก็ตัวนี้เลยครับ ถ้าแบบ advance ขั้นเทพ jquery.validator จะเหมาะกว่า
ส่วนตัวผมชอบตัวนี้อยู่ 2 อย่างครับ คือ idea การใช้ regular expression ตรงไปตรงมาดี กับ idea การทำ ballon ที่แสดง error message โดยการใช้ technic css เอา div ที่มี background สีดำมาเรียงต่อๆกัน ซึ่งไม่ต้องพึ่งรูปภาพเลยแม้แต่น้อย ส่วนที่ผมไม่ชอบคือ custom message มันยืดหยุ่นซักเท่าไหร่
ขอบคุณค่ะ
มีประโยชน์อย่างมากเลย ขอบคุณครับ
เป็นประโยชน์มากๆเลย ชอบๆ
เราจะเปลี่ยนคำพูด ที่แสดง error ได้ไหม? ถ้าได้ -> ยังไง? ตอบที ^^
คือผม..สงสัยอะครับ เวลาที่เราทำอย่าง เช่น insert เสร็จ คือไม่ต้องการให้ฟอร์มมันหายอะครับ.. อยากให้แค่ข้อมูลในฟอร์มหายไปเท่านั้น แล้วก็บอกว่าเราทำเรียบร้อยครับ…
เช่น…
เราเรียกใช้หน้า insert.php เข้ามา แล้วพอมันตรวจเสร็จก็จะไปหน้า insert.php พอ insert เสร็จมันดันแสดงแค่ว่า insert เรียบร้อย แต่ฟอร์มหายไป ต้องกด refresh จึงทำต่อได้..
หน้าหนัก…
…
…
ajaxSubmitMessage: “ข้อมูลได้ทำเสร็จเรียบร้อยครับ”,
success : false,
รบกวนตอบด้วยนะครับ..ขอบคุณมากเลยครับ
ตอบคุณมือใหม่ คุณต้องศึกษาเรื่อง AJAX ครับ ซึ่งตัว jQuery มีฟังก์ชั่น AJAX ให้ท่านใช้งานอยู่แล้ว