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

การใช้งาน 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 จะนำข้อความพื้นฐานมาแสดง โดยอัตโนมัติ เป็นไงครับ แต่ยังไม่จบนะครับไว้จะมาอธิบายต่อใน บทความถัดไป ;)

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

การเพิ่ม Font ภาษาไทยอื่นๆ เข้าไปใช้งานใน MPDF

เนื่องมาจากผมได้มีโอกาสจับงานที่ต้องแปลงหน้าเว็บให้เป็น PDF ลองๆ หาข้อมูลก็ไปเจอเจ้าตัวนี้ MPDF ซึ่งจริงๆ แล้วก็มีให้ใช้งานอีกหลายๆ ตัว สาเหตุที่เลือกใช้งานตัวนี้เพราะมัน ค่อนข้างจะติดตั้ง และใช้งานง่าย และยังสามารถอ้างอิง CSS เข้ามาช่วยจัดหน้าตาใน PDF ได้อีกด้วย ซึ่งผลที่ได้เพี้ยนไปจากตัวจริงไม่มากครับ แต่ที่ทำให้เลือกใช้งานเพราะการเพิ่มฟ้อนท์ภาษาไทย เข้าไปนั้นค่อนข้างง่ายครับ เลยจะขอมาแนะนำดังนี้

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

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

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

ปลดล็อคความสามารถให้กับ Sublime Text ตอนที่ 2

ความเดิมจากตอนที่แล้วสำหรับตอนที่ 2 นี้ ผมจะมาแนะนำ plugin ที่น่าใช้สำหรับ Web Development นะครับ ซึ่งความจริงแล้วก็มีให้เราเลือกเลือกใช้มากมาย สามารถ search google ได้ด้วยคำว่า "sublime popular package" ซึ่งทาง Sublime Text ได้จัดอันดับไว้ให้เราด้วย สามารถเข้าไปเลือกดู เลือกโหลดกันตามใขชอบเลยครับ แต่ผมจะมาขอแนะนำ ตัวที่คิดว่าลงแล้วใช้งานได้จริงแน่ๆ มาฝากกันครับ