เริ่มกันที่สร้าง form เพื่อรับค่ากันก่อนค่ะ
โค้ด: เลือกทั้งหมด
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Java Script check null</title>
</head>
<body>
<FORM METHOD="POST" NAME="forms" ACTION="#" onsubmit="javascript:return checkNull();">
<h1>Welcome to Mindphp</h1>
ชื่อ : <input type="text" name="firstname" /> <br />
นามสกุล : <input type="text" name="lastname" /> <br />
ชื่อเล่น : <input type="text" name="nickname" /> <br />
<input type="submit" Value="Submit" />
</form>
</body>
</html>
JavaScript โดยส่วนใหญ่เราจะสร้างไว้ในส่วนของ head กันนะค่ะ
โค้ด: เลือกทั้งหมด
<script language="javascript">
function checkNull() {
if(document.forms.firstname.value=="") { // เป็นการเช้กค่าว่าช่องนี้เป็นค่าว่างมั้ย (forms = ชื่อ form), (firstname = ชื่อหรือ name ของ textbox )
alert("กรุณาระบุชื่อ") ; // alert จะเป็นการแจ้งเตือนว่า กรุณากรอกชื่อ ^^
document.forms.firstname.focus() ; // .focus() ตรงนี้คือระบุตำแหล่งที่เราต้องการเช็กค่ะ
return false ;
}
if(document.forms.lastname.value=="") {
alert("กรุณาระบุนามสกุล") ;
document.forms.lastname.focus() ;
return false ;
}
if(document.forms.nickname.value=="") {
alert("กรุณาระบุชื่อเล่น") ;
document.forms.nickname.focus() ;
return false ;
}
else
return true ;
}
</script>