การ Validate Chosen Multiple Select หลาย ๆ แถว
8 สิงหาคม พ.ศ. 2559 พันธกานต์ มั่นจันทร์ สำนักคอมพิวเตอร์ เปิดอ่านแล้ว 1 ครั้ง

          จากบทความเดิมที่เคย เขียนเรื่อง การใช้งาน Chosen Multiple Select with Groups หลายๆแถวนั้นได้เขียนเพียงวิธีเรียกใช้งานเท่านั้น วันนี้ผู้เขียนมีวิธีการ validate ค่าให้ยังคงค้างอยู่ในช่องเดิมที่จำเป็นต้องเก็บข้อมูล

          ในบทความนี้ผู้ เขียนจะอธิบายการใช้งาน view และ controller เท่านั้น ส่วนเรื่องการเรียกใช้ jquery chosen นั้นให้ผู้อ่านกลับไปติดตามได้ที่ http://my.ict.buu.ac.th/Blog/Lists/Posts/Post.aspx?List=d0721da9%2Dc945%2D475e%2Db090%2Dde88e638bbfb&ID=2314&Source=http%3A%2F%2Fmy%2Eict%2Ebuu%2Eac%2Eth%2FBlog%2FLists%2FPosts%2FAllPosts%2Easpx%3FView%3D%7BDD9DFC3A%2D3AA2%2D4515%2D925F%2D901D3A32A703%7D%26FilterField1%3DAuthor%26FilterValue1%3DPantakarn%2520Manjan&Web=67dd98eb%2D790a%2D48e8%2Dbf3d%2D7a7afa55e0b

ขั้นตอนการเขียนโปรแกรม

    View

  1. ต้องทราบจำนวนแถวของข้อมูลที่แน่ชัด
  2. hidden value ของแต่ละแถวเก็บเป็น array
  3. สร้าง form select ให้ tag name เก็บข้อมูลเป็น array 2 มิติโดยมี class chosen-select มาช่วยจัดเรียงข้อมูล
  4. เช็ค validate form select

Controller

  1. รับค่า form input ที่เป็น array มาเก็บไว้ในตัวแปร
  2. เช็ค validate form โดยใช้ library ของ codeigniter

ตัวอย่างโค้ดหน้า view

echo form_open("chosen/validate_chosen");

    $data = array( "Group 1"=>array("1.1 Sub Group", "1.2 Sub Group", "1.3 Sub Group"),

    "Group 2"=>array("2.1 Sub Group", "2.2 Sub Group", "2.3 Sub Group"),

    "Group 3"=>array("3.1 Sub Group", "3.2 Sub Group", "3.3 Sub Group"), ); // ข้อมูลตัวอย่าง

    // ข้อมูลมีทั้งหมด 5 แถว

    for($num=0;$num<5;$num++)

    {

        echo '<input type="hidden" name="ROW['.$num.']" value="'.$num.'">'; // สร้าง input form hidden เพื่อใช้เช็คข้อมูลจำนวนแถว

 

        /*************** เอาไว้เช็ค validate ********************/

        $ARR_MULTI_SELECT[$num] = array();

        for($num_sel=0;$num_sel<5;$num_sel++)

        {

            // ถ้าค่า set_value มีข้อมูล

            if( set_value("MULTI_SELECT[$num][$num_sel]")!="" ) // validate

            {

                $ARR_MULTI_SELECT[$num][$num_sel] = set_value("MULTI_SELECT[$num][$num_sel]"); // นำค่า value ที่เช็ค validate ไว้มาเก็บไว้ใน array

            }

        }

        /*********************************************************/

        // สร้าง form dropdown group โดยมี tag name เป็น array 2 มิติ มิติแรกให้ใส่ลำดับของแถว มิติที่ 2 ให้ใส่ช่องว่างๆเพื่อให้โปรแกรมรัน index เอง

        $select_dropdown = '<select data-placeholder="" style="width:450px;" class="chosen-select" multiple name="MULTI_SELECT['.$num.'][]">

            <option value=""></option>';

        // นำ value ของข้อมูลตัวอย่างมาใส้ที่ dropdown

        foreach($data as $key=>$sub_data)

        {

            $select_dropdown .= '<optgroup label="'.$key.'">';

            foreach($sub_data as $index=>$val)

            {

                /******** เอาไว้เช็ค validate ****************/

                // ถ้า value ของข้อมูลตัวตรงกับค่า value ที่ validate ในแต่ละแถวให้แสดงข้อมูล

                if( in_array($val, $ARR_MULTI_SELECT[$num]) )

                {

                    $selected = "selected";

                }

                else

                {

                    $selected = "";

                }

                /***************************************/

                $select_dropdown .= '<option '.$selected.' value="'.$val.'">'.$val.'</option>';                    

            }

            $select_dropdown .= '</optgroup>';

        }    

        $select_dropdown .= '</select>';

        echo $select_dropdown.form_error("MULTI_SELECT[$num]", '<div style="color:red">', '</div>')."<br><br>";

    }    

echo '<input type="submit" value=" บันทึก ">';

echo form_close();

ตัวอย่างโค้ดที่ controller

    public function validate_chosen()

    {

// รับข้อมูล input type post

        $ROW = $this->input->post("ROW");

        $MULTI_SELECT = $this->input->post("MULTI_SELECT");

        // โหลด library form_validation

        $this->load->library('form_validation');

        $this->form_validation->set_error_delimiters('', '<br>');

        // วนลูปจำนวนแถว จะได้จำนวนแถวทั้งหมด

        foreach($ROW as $num=>$val)

        {    // ถ้าในแถวนั้นมีข้อมูลจะเข้า if

            if(!empty($MULTI_SELECT[$num]))

            {

                foreach($MULTI_SELECT[$num] as $index=>$val)

                {    // validate form MULTI_SELECT ในแถวที่ $num และตัวที่ $index

                    $this->form_validation->set_rules('MULTI_SELECT['.$num.']['.$index.']', "Row".($num+1), 'required|xss_clean');

                }

            }

            else

            {

                // validate form MULTI_SELECT ในแถวที่ $num

                $this->form_validation->set_rules('MULTI_SELECT['.$num.']', "Row".($num+1), 'required|xss_clean');

            }    

        }

        // ถ้า validate form ไม่ผ่านจะส่งข้อมูลกลับไปที่หน้า view

        if ($this->form_validation->run() == FALSE)

        {

            $this->validate_multiselect_group();

        }

    }

ผลลัพธ์ที่ได้

 

รูปภาพที่ 1 รูปภาพ form select dropdown ก่อน validate

 

รูปภาพที่ 2 รูปภาพ form select dropdown หลัง validate

    จะเห็นได้ว่าจาก รูปภาพที่ 1 เมื่อเลือกข้อมูลที่ต้องการแล้ว ข้อมูลจะยังคงค้างค่าไว้ให้เมื่อโปรแกรม validate ข้อมูลดังรูปภาพที่ 2 ทำให้สะดวกต่อผู้ใช้งานที่เลือกข้อมูลไปเยอะๆแล้วเผลอลืมเลือกกรอกข้อมูลที่ จำเป็นอื่นๆได้