ตรวจสอบฟอร์มขณะพิมพ์ด้วย GAJAX

มีคำถามเกียวกับฟอร์มมาพอสมควรโดยเฉพาะ การตรวจสอบฟอร์ม ขณะพิมพ์ ตัวอย่างนี้เป็นการตรวจสอบโดยใช้ GAJAX ครับ ซึ่งจะช่วยให้การออกแบบง่ายขึ้น

ข้อสังเกตุคือ เราสามารถแยกโค้ดส่วนฟอร์ม และส่วน Javascript ได้ โดยสามารถแยกเอาส่วนของ Javascript ไปไว้ในไฟล์ JS แล้ว include เข้ามาใช้ได้

<form id="register_frm" class="member_frm" method="post" action="newregister.php">
<p class="h"><span>ลงทะเบียนสมาชิกใหม่</span></p>
<p><label for="register_username">ชื่อ :</label><input type="text" name="register_username" id="register_username" size="40" maxlength="20" /><span class="result" id="resultUsername">&nbsp;</span></p>
<p><label for="register_email">อีเมล์ :</label><input type="text" name="register_email" id="register_email" size="40" /><span class="result" id="resultEmail">&nbsp;</span></p>
<p><input type="submit" name="register_submit" id="register_submit" class="button" value="สมัครสมาชิก" /></p>
</form>

<script type="text/javascript">
$G(document).Ready(function(){ /* เมื่อเว็บเพจโหลดเรียบร้อย */
     /* ตรวจสอบ username  */
     $G('register_username').addEvent('keyup', doMemberCheck);
     $G('register_username').addEvent('change', doMemberCheck);
     /* ตรวจสอบ email  */
     $G('register_email').addEvent('keyup', doEmailCheck);
     $G('register_email').addEvent('change', doEmailCheck);
});
</script>

โค้ดสำหรับฟอร์ม และ Javascript ที่ต้องใส่ไว้ในเพจหลักควบคู่กับฟอร์ม
$G(document).Ready(function(){
     /* do some thing */
});

โค้ดด้านบน สำหรับเมื่อเพจโหลดเรียบร้อยแล้วค่อยไปทำงานภายใน function เหมือนกับ <body onload="/* do some thing */">
$G('register_username').addEvent('keyup', doMemberCheck);

คือการดัก event ให้กับ element ในตัวอย่างมีการดัก event onkeyup (ขณะพิมพ์) และ onchange (เมื่อเมาส์ออกจาก element และ มีการเปลี่ยนแปลงค่า) โดยให้มีการไปทำฟังก์ชั่น doMemberCheck เพื่อตรวจสอบข้อความที่พิมพ์ลงไป
<script type="text/javascript">
/* ตรวจสอบ username  */
var doMemberCheck = function(event) {
     var value = GEvent.element(event).value;
     var result = $E('resultUsername');
     var patt = new RegExp('^[a-z]{1,}$');
     if (value == '') {
          result.innerHTML = 'กรุณากรอกชื่อ';
     } else if (!patt.test(value)) {
          result.innerHTML = 'ภาษาอังกฤษ ตัวพิมพ์เล็กเท่านั้น';
     } else if (value.length < 4) {
          result.innerHTML = 'ชื่อไม่น้อยกว่า 4 ตัวอักษร';
     } else {
          result.innerHTML = '';
     };
};

/* ตรวจสอบ email  */
var doEmailCheck = function(event) {
     var value = GEvent.element(event).value;
     var result = $E('resultEmail');
     var patt = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.([a-z]){2,4})$/;
     if (value == '') {
          result.innerHTML = 'กรุณากรอกอีเมล์';
     } else if (!patt.test(value)) {
          result.innerHTML = 'อีเมล์ไม่ถูกต้อง';
     } else {
          result.innerHTML = '';
     };
}
</script>

โค้ดสำหรับตรวจสอบฟอร์ม อาจแยกไปใส่ไฟล์ js ก็ได้ เพื่อที่จะสามารถเรียกใช้ซ้ำได้ตามต้องการ
ผู้เขียน goragod โพสต์เมื่อ 28 มิ.ย. 2552 เปิดดู 14,310 ป้ายกำกับ GAJAXJavascriptForm
^