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

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

 

วันนี้จะมาขออธิบายการใช้งาน jQuery Validation เพิ่มเติม ในส่วนการ Config ค่าต่างๆ เพิ่มเติมที่นอกเหนือจากการเรียกใช้งานแบบปกติ ซึ่งจะสามารถทำได้โดยการประกาศกฏ เพิ่มเข้าไปในตัว validation ที่เราประกาศ ซึ่งค่าที่เราต้องจะแบ่งออกเป็น 3 ส่วนหลักๆ คือ การประกาศกฏ, ข้อความ error, กำหนดการกระทำหลังจากตรวจข้อมูลแล้ว


      $('#form1').validate({
        rules: {
            username: {
                required : true,
                minlength : 4,
                maxlength : 20
            },
            password: {
                required : true,
                minlength : 4,
                maxlength : 20
            },
            sex : "required",
            tel : {
                required : true,
                number : true,
                minlength : 9
            }
        },
        messages : {
        username: {
                required : "กรุณากรกอกข้อมูล",
                minlength : "กรุณากรกอกข้อมูล",
                maxlength : "กรุณากรกอกข้อมูล"

            },
            password: {
                required : "กรุณากรกอกข้อมูล",
                minlength : "กรุณากรกอกข้อมูล",
                maxlength : "กรุณากรกอกข้อมูล"

            },
            sex : "กรุณากรกอกข้อมูล",
            tel : {
                required : "กรุณากรกอกข้อมูล",
                number : "กรุณากรกอกข้อมูล",
                minlength : "กรุณากรกอกข้อมูล"

            }
       },
        submitHandler: function(form) {
            form.submit();
        }
    });

จากตัวอย่าง เป็นการกำหนดกฏ ในการตรจสอบข้อมูลที่กรอกไปแบบ คร่าวๆ จะสังเกตว่าข้อมูลชนิดไหนที่เราเช็คแค่เรื่องเดียวก็แค่ประกาศเพียงตัวเดียว ตามข้อมูลเพศ หากต้องการกำหนดเยอะ เช่น required, minlength, maxlength ก็สร้างเป็น array ซ้อนเข้าไปเหมือนตัวอย่างโดยเรียงการตรวจสอบตามลำดับที่เราเขียนไว้

        messages : {
             username: {
                required : "กรุณากรกอกข้อมูล",
                minlength : "กรุณากรกอกข้อมูลอย่างน้อย 4 ตัวอักษร",
                maxlength : "กรุณากรกอกข้อมูลไม่เกิน 20 ตัวอักษร"

            },
            password: {
                required : "กรุณากรกอกข้อมูล",
                minlength : "กรุณากรกอกข้อมูลอย่างน้อย 4 ตัวอักษร",
                maxlength : "กรุณากรกอกข้อมูล"

            },
            sex : "กรุณากรกอกข้อมูล",
            tel : {
                required : "กรุณากรกอกข้อมูล",
                number : "กรุณากรกอกข้อมูลเป็นตัวเลขเท่านั้น",
                minlength : "กรุณากรกอกข้อมูลอย่างน้อย 9 ตัวอักษร"

            }

ในส่วนของข้อความถ้าไม่ได้กำหนด หรือเพิ่มเข้าไป ตัว plugin จะนำข้อความพื้นฐานมาแสดง โดยอัตโนมัติ เป็นไงครับ แต่ยังไม่จบนะครับไว้จะมาอธิบายต่อใน บทความถัดไป ;)

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

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

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

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

ปัญหาที่เกิดจากการใช้งาน 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"


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

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