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