ประยุกต์ตรวจสอบค่าว่างของ element ภายใน form ด้วย javascript

By -

ธรรมดา ของการเขียนโปรแกรมครับ เมื่อเขียนโปรแกรมไปได้ซักพักนึง ก็จะเกิดการขึ้นเกียจกันเกิดขึ้น โดยเฉพาะเวลาต้องเช็คค่าว่างด้วยแล้ว สมมุติว่า ใน From ของเรามี field 20 กว่าช่อง ก็หมายความว่า ต้องมานั่งเช็คทีละช่อง (ตอนเริ่มเขียนโปรแกรมใหม่ๆ)  โค้ดที่เราเขียนก็จะอ่านยาก แถมยาวเหยียด ดังนั้น จึงต้องหาวิธีที่ ที่ทำให้เขียนโค้ดสั้นลงแล้วเอาไปไช้ได้อีก  วันนี้เราจะมาลองประยุกต์กันครับ สร้างฟอร์ม ที่ชื่อว่า formName

<form id="formName" name="formName">
   <p>ไอดี: <input type="text" name="txtId" value="" /></p>
   <p>ชื่อ : <input type="text" name="txtName" value="" /></p>
   <p>ที่อยู่ : <textarea name="txtAddress"></textarea> </p>
   <p> <input type="button" value="ตรวจสอบ" onclick="ckForm();" /></p>
</form>

รายละเอียดในฟอร์มของยกตัวอย่าง เป็น ไอดี ชื่อ ที่อยู่ แล้วก็ปุ่มตรวจสอบนะครับ โดยปุ่มตรวจสอบก็จะจับเหตุการณ์เวลา คลิก ให้ไปเรียก function ckForm()

แล้วก็มาสร้าง function ckForm ต่อ ->  เขียนโค้ด

<script type="text/javascript">
function ckForm(){
	var form = document.getElementById('formName').elements;
	for(var i = 0; i < form.length; i++){
		if(form[i].type=="button") continue;
		if(form[i].value==""){
			if(form[i].name=="txtName"){
				alert("ชื่อเป็นค่าว่าง");
			}else{
				alert("element ตัวที่ "+i+ "เป็นค่าว่าง");
			}
			form[i].focus();
			return;
		}else{
			var strLength = form[i].value;			
			if(strLength.length<10){// แสดงจำนวนของ ตัวอักษร พร้อมกับเช็คความยาวของตัวอักษร
			   alert("ความยาวของตัวอักษร"+strLength.length);   	
			};
		}
		// ถ้าต้องการ ดึง ประเภท ของ element : form[i].type
		// ดึง ชื่อ ของ element : form[i].name
	}
//form.submit();
}
</script>

การทำงานคร่าวๆของ function ก็คือ

var form = document.getElementById(‘formName’).elements;

ประกาศตัวแปร form เพื่อเก็บค่า elements ทุกตัวที่อยู่ ภายใน from ที่ชื่อ formName ที่เราสร้างขึ้น

แล้ว ก็ loop check ด้วย for loop โดยนับ length จาก element ภายใน ฟอร์ม ด้วย form.length

ภายใน loop เราสามารถ ดึงค่าต่างๆ ดังนี้

// ถ้าต้องการ ดึง ประเภท ของ element :      form[i].type
// ดึง ชื่อ ของ element :      form[i].name

// ดึงค่า ของ element :      form[i].value

// check ความยาวของตัวอักษร ด้วย form[i].value.length;

จากโค้ด ภายใน function

if(form[i].type==”button”) continue

if(form[i].value==””){

if(form[i].name==”txtName”){
alert(“ชื่อเป็นค่าว่าง”);
}else{
alert(“element ตัวที่ “+i+ “เป็นค่าว่าง”);
}
form[i].focus();
return;

}else{
var strLength = form[i].value;
if(strLength.length<10){
alert(“ความยาวของตัวอักษร”+strLength.length);
};
}

ด้านบนก็มีการเช็ค ว่าถ้า ตัวที่หาเจอปัจจุบันเป็นค่าว่าง  ก็จะเข้าไปเช็คต่อว่าเป็น txtName (ชื่อ)ไหม  ก็ให้แสดงว่า ชื่อเป็นค่าว่าง แต่ถ้าไม่ใช่ ก็แสดงลำดับของ element ที่ loop

แล้วก็ set focus ไปที่ ช่อง ที่ว่าง แล้วก็หยุดการทำงาน ออกจาก function ด้วย return;

ถ้าไม่ใช่ค่าว่าง ก็ดึงเอาค่าของตัวปัจจุบัน มาเช็คว่า ความยาวที่ป้อนมา น้อยกว่า 10 หรือป่าว ถ้ามีก็แจ้งเตือน หรือจะ return อะไรก็แล้วแต่ความชอบ ส่วนบุคคล ครับ

ลองเอาไปลองเล่นดูครับ การทำงานก็จะมี ประมานนี้หล่ะ  เด่วครั้งต่อไปเอา การเช็ค แบบนี้ไปประยุกต์กับการใช้งาน ตัวแปร ที่เป็น array นะครับ

mitsumasa