ตรวจสอบฟอร์มขณะพิมพ์ด้วย 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"> </span></p>
<p><label for="register_email">อีเมล์ :</label><input type="text" name="register_email" id="register_email" size="40" /><span class="result" id="resultEmail"> </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 ก็ได้ เพื่อที่จะสามารถเรียกใช้ซ้ำได้ตามต้องการ