โดยปกติแล้วเรามักใช้การตรวจสอบความผิดพลาดในการกรอกข้อมูล ด้วย Javascript เช่นการตรวจสอบว่าได้ทำการกรอกข้อมูลในช่องที่ต้องการหรือไม่ ซึ่งมันก็เป็นวิธีที่ดีครับ แต่มันก็ค่อนข้างยุ่งยากในหลายกรณีเช่น

1.การตรวจสอบด้วย Javascript มักซับซ้อนกว่าการตรวจด้วย PHP
2.ตรวจด้วย Javascript แล้ว ก็ยังต้องตรวจด้วย PHP เมื่อ Submit ไปแล้วอีกที ป้องกันการเปลี่ยนแปลงค่าระหว่างทาง
3.ตรวจกับฐานข้อมูลไม่ได้ เช่น ไม่สามารถ ตรวจชื่อซ้ำ หรือ ตรวจการโพสต์ซ้ำได้

เอาแค่นี้ก็พอ

ผมแก้ปัญหานี้ทั้งหมดด้วยการย้ายการตรวจไปที่ PHP เพียงอย่างเดียว ด้วยเทคนิค AJAX ถ้าข้อมูลถูกต้องก็บันทึกได้เลย แต่ถ้าผิดพลาด ก็คืนความผิดพลาดกลับมา

ในตัวอย่างการตรวจ ยังไม่ค่อยจะ Advance สักเท่าไรนะครับ เนื่องจากจะเป็นเพียงเทคนิคเพื่อทำความเข้าใจเท่านั้น เพื่อให้ง่ายก็เลยไม่ทำอะไรที่ซับซ้อนนัก และเนื่องจาก มีคำถามจากบอร์ด สำหรับการตรวจในลักษณะนี้มี

Concept ในการตรวจคือ ออกแบบฟอร์ม ที่มี radio เป็นตัวเลือก และหากเลือก Custom จะต้องให้เหตุผลด้วย

ผมใช้ GAJAX ในการออกแบบนะครับ เพื่อให้เห็นว่า ถ้าเราทำงานด้วย Frame Work แล้ว งานมันจะง่ายดายยิ่งขึ้นเพียงไร ถ้าคุณจะทดสอบคุณต้องติดตัง GAJAX ด้วย (สามารถ View Source จากตัวอย่างได้ครับ)

<form id="frm_test" method="post" action="submit01.php" onsubmit="frmSubmit(this)">
<p>
<input type="radio" name="radio[0]" value="0"  /> Value 0
<input type="radio" name="radio[0]" value="1"  /> Value 1
<input type="radio" name="radio[0]" value="2"  /> Custom
<textarea name="text[0]" id="text_0"></textarea>
</p>
<p>
<input type="radio" name="radio[1]" value="0"  /> Value 0
<input type="radio" name="radio[1]" value="1"  /> Value 1
<input type="radio" name="radio[1]" value="2"  /> Custom
<textarea name="text[1]" id="text_1"></textarea>
</p>
<p><input type="submit" value="Submit" /></p>
</form>

ฟอร์มที่ผมใช้ครับ input ต่างๆผมใช้ array เป็นหลัก เพื่อให้การตรวจสอบสามารถทำได้ง่ายครับ ไม่มีอะไรพิศดาร เมื่อจะ Submit ก็ให้เรียกใช้ frmSubmit เพื่อ Submit ด้วย Ajax อีกที

<script type="text/javascript">
function frmSubmit(pForm) {
    var req = new GForm( pForm );
    req.submit(function( xhr ){
        var ds = xhr.responseText.split('|'); // แยกตัวคั่นออกเป็นแต่ละรายการ
   
        if (ds.length == 1) {
            alert(ds[0]); // ไม่มีตัวคั่น แสดงว่าไม่มีข้อผิดพลาด
        } else {
            alert(ds[0]); // แสดงข้อความเตือน
            new GHighlight(ds[1]).play(); // ทำ highlight ที่ textarea ที่ผิดพลาด
            $E(ds[1]).focus(); // ย้ายโฟกัสไปยัง textarea ที่ผิดพลาด
        };
    });
    return true;
};
</script>

Javascript ครับ การทำงานต่างๆ จะอยู่ภายใน GForm ทั้งหมด นอกจากนี้ ในตัวอย่างนี้ ยังมีการทำ highlight สว่นที่ผิดพลาดด้วย GHighlight อีกด้วย

โค้ดด้านบนทั้งหมดอยู่ในหน้า gajax01.php ครับ

<?php
 header("content-type: text/html; charset=UTF-8");
 if (isset($_POST['radio'])) {
  foreach ($_POST['radio'] AS $i => $radio) {
   if ($radio == 2 && $_POST[text][$i] == '') {
    $error = "กรุณาให้เหตุผลที่ $i|text_$i";
    break;
   }
  }
  if ($error == '') {
   print_r($_POST);
  } else {
   echo $error;
  }
 } else {
  echo 'กรุณาเลือกตัวเลือกอย่างน้อย 1 รายการ';
 }
?>

โค้ด submit01.php สำหรับรับค่าจาก Ajax ครับ จะเห็นว่าโค้ดไม่ได้ยุ่งยากนักเนื่องจากผมใช้ input แบบ Array ทำให้การตรวจสอบไม่ยาก ผมใช้ตัวคั่นข้อความเมื่อผิดพลาดเป็น | เพื่อสำหรับส่งกลับ และบอกให้รู้ว่ามีข้อผิดพลาด หลักการง่ายๆก็คือ ถ้ามีข้อผิดพลาด จะพบ | ในข้อมูลที่ส่งกลับ แต่ถ้าไม่มี ตามตัวอย่าง ผมส่งข้อความที่โพสต์กลับไปแสดงผล

การส่งค่ากลับ ยังอาจส่งกลับได้หลายทางนะครับ เช่นการส่งกลับด้วย JSON หรือ XML ซึ่งก็แล้วแต่ความซับซ้อนของการส่งครับ ในตัวอย่างนี้มรการส่งกลับเพียง Error เดียว ผมเลยเลือกใช้แบบข้อความธรรมดาก็เพียงพอแล้ว

ตัวอย่าง สามารถดูซอร์สโค้ดได้จากการคลิกขวา และ View Source ได้เลยครับ