ข้ามไปที่เนื้อหาหลัก

การใช้งาน jQuery Validation Plugin ตอนที่ 1


สมัยก่อนตอนเขียนเว็บใหม่ๆ การกรอกฟอร์มต่างๆ ผมมักจะเขียนตรวจสอบข้อมูลต่างๆ ด้วย PHP ตลอด ถึงแม้ว่ามันจะสะดวกและง่าย แต่ว่าวิธีจะมีปัญหาในเรื่องการเก็บค่าต่างๆ ที่ผู้ใช้งานเคยกรอกไปแล้วในส่วนที่ถูกต้อง ซึ่งก็ทำให้ต้องมานั่งเขียนเก็บค่าที่รับมาจากฟอร์มไว้ แล้วส่งกลับไปยังหน้าเดิม ยิ่งถ้าฟอร์มมี input เยอะๆ ก็ต้องมานั่งเขียนเก็บค่าตามฟอร์ม อีกทั้งยังต้องมาเขียนตรวจสอบข้อมูลที่รับมาอีก



ปัญหานี้จะหมดไปหากท่านใช้ Javascript จริงๆ มันก็ไม่ไช่เรื่องใหม่อะไร กับการนำ Javascript เข้ามาใช้ในการช่วยตรวจเช็คข้อมูลว่ามีความถูกต้องหรือไม่ ส่วนตัวไม่ค่อยชอบ Javascript เท่าไหร่ เพราะไม่ค่อยจะเข้าใจการเรียกใช้งาน หรือแม้แต่การจะเข้าถึง element htm ใดๆ แต่ว่าในปัจจุบันมี Javascrpt Library อย่าง jQuery ออกมาให้ใช้งาน ผมคิดว่ามันใช้งานง่ายขึ้นกว่าเดิม เลยลองหันมาใช้ตัว jQuery Validation Plugin ดู ซึ่งผลก็ออกมา โอเคเลยครับ ยืดหยุ่น มากๆ ซึ่งท่านสามารถ download ได้จาก ที่นี่

ส่วนวิธีการใช้งานนั้นก็มีหลายแบบ วันนี้ผมจะขอเสนอแบบง่ายๆ ก่อนนะครับ

ขั้นตอนแรกก็เรียกไฟล์ jquery ซึ่งสามารถหาโหลดได้จากเว็บของ jquery เลยครับ ชอบเวอร์ชันไหนก็เลือกเลยยยย ของผมใช้ 2.0.3 และเรียกไฟล์ jQuery Validate มาด้วย แบบนี้ครับ



จากนั้นก็ทดสอบ สร้างฟอร์มง่ายๆ แล้วกำหนด id ให้กับฟอร์มนั้นๆ ด้วยนะครับ เพราะเราจะเรียกใช้คำสั่งด้วย id ของฟอร์มที่เราสร้าง แบบนี้ครับ
username :
email :
address:

แล้วมาเรียกใช้ตัว Validate ต่อจาก ฟอร์มที่เราสร้างแบบนี้ครับ



วิธีการเรียกใช้งานแบบนี้จะเป็นแบบอัตโนมัตินะครับ เราจะไม่สามารถแก้ไข หรือเปลี่ยนการเช็คอะไรได้มาก วิธีการเช็คตามตัวอย่างหาก เราใส่คำว่า required ที่ input ตัวไหน มันก็จะฟ้องว่าให้เราเติมค่านั้น อย่าให้เป็นค่าว่าง หรือถ้าหากเรา ใช้ input กำหนดชื่อ เป็น อีเมล์ มันก็เช็คว่ารูปแบบนั้นถูกต้องหรือไม่

ส่วนวันนี้วันนี้ขอจบเพียงเท่านี้นะครับ มีโอกาสว่างเมื่อไหร่จะมาพูดถึงการเรียกใช้งานในแบบอื่นๆ นะครับ


โพสต์ยอดนิยมจากบล็อกนี้

มาเข้าใจ และใช้ Datatable ดึงข้อมูลแบบ Server-side ด้วย PHP, MySQL กันเถอะ

มีช่วงหนึงผมเคยนำ datatable มาพัฒนาในงานแต่เกิดปัญหาเนื่องจากมีข้อมูลขนาดใหญ่ ทำให้เกิดการโหลดในครั้งแรกที่โหลดหน้าเพจนั้นๆ เนื่องจากผมใช้ Ajax ในการโหลดข้อมูลทั้งหมดมาในครั้งเดียวด้วยจำนวนข้อมูล 1000 ขึ้น ซึ่งตอนนั้นผมคิดว่าการทำ preload น่าจะช่วยได้ แต่ว่าถ้า user เกิดเผลอไปกด refesh หรือแก้ไขข้อมูลเวลากลับมาที่หน้าข้อมูลก็ต้องโหลดใหม่อีก ทำให้ผมเลิกใช้ datatable ไปเลย เพราะคิดว่ามันคงไม่เหมาะ

แต่ในความจริงแล้ว datatable ก็ได้มีสิ่งที่มาแก้ในจุดนั้นได้ ซึ่งเรียกว่า server-side โดยการที่อนุญาตให้เรา query ข้อมูลออกมาก่อนแล้วส่งมาให้ datatable อ่านข้อมูลในจำนวนที่น้อยลง หลักการก็เหมือนๆ กับบทความการทำสร้าง XML จากข้อมูลขนาดใหญ่นั่นแหละครับ แต่มีเงื่อนไขเพียงแต่ว่า ต้อง Filter และส่งข้อมูลออกมาในรูปแบบที่ตรงตามหลักของ datatable เท่านั้น ( บางครั้งเวลาเข้าไปอ่าน Document หรือดู Example จะงงๆ ว่าอะไรเยอะแยะ ) โดยวันนี้จะมาแนะนำการใช้งานแบบง่ายๆ กันเลย :D

การติดตั้ง Google Analytics ด้วย Google Tag Manager

สำหรับสายงานโปรแกรมเมอร์นั้น ไม่ค่อยมีปัญหามากนักเวลาที่จะต้องแก้ไข หรือเปลี่ยน UA โค๊ดของ Analytics เพราะสามารถทำได้เอง แต่ก็นะ ถึงแม้ว่าจะง่ายแต่ในเวลาที่ไม่สะดวกจริงๆ แถมงานที่ทำส่วนใหญ่ต้องอัพผ่าน Git การจะทำอะไรแบบนั้นก็ไม่ไช่เรื่องง่ายอีกต่อไป



ปัญหาที่เกิดจากการใช้งาน Facebook PHP SDK ในการทำ Facebook Login

จากบทความก่อนๆ ที่ผมเคยแนะนำการการใช้งาน Facebook PHP SDK ในการทำ Facebook Login สำหรับการแก้ไขปัญหา Chrome ไม่รองรับ Facebook Javascript SDK ซึ่งสามารถใช้งานได้ปกติ โดยการสับขาหลอกของตัวผมเอง หลายๆ ท่านที่เข้ามาอาจจะลองก๊อปโค้ดไปแปะ แล้วปรากฎว่ามันไม่เห็นจะทำงานได้จริง

เนื่องจากปัญหาที่เกิดขึ้นจาก error นี้
"Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request"