JavaScript ตรวจสอบการกรอกข้อมูล ว่าเป็นค่าว่างหรือไม่

สอนภาษา JavaScript เขียนโค้ดตรวจสอบการกรอกข้อมูล ว่าผู้ใช้งานกรอกข้อมูลในช่องหรือไม่ หากไม่กรอกข้อมูลให้แสดง alert แจ้งเตือน และไม่ประมวลผลจนกว่าผู้ใช้งานจะกรอกข้อมูลดังกล่าว สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ตรวจสอบการกรอกข้อมูล ว่าเป็นค่าว่างเปล่าหรือไม่

<form onsubmit="return check()">
    ชื่อ<br/>
    <input type="text" id="name">
    <input type="submit" value="ตกลง">
</form>

<script>
    function check() {
        var name = document.getElementById("name");
        if( name.value == "" ) {
            alert("กรุณากรอก ชื่อ")
            name.focus();
            return false;
        }
    }
</script>

1. ใช้คำสั่ง onsubmit ตรงแท็ก form สำหรับเวลาผู้ใช้งานกดคลิกปุ่ม submit จะเข้าไปตรวจสอบการกรอกข้อมูล ว่าเป็นค่าว่างหรือไม่ ในฟังก์ชัน check ของ JavaScript

2. ภายในฟังก์ชัน check จะอ้างถึงช่องกรอกข้อมูลด้วย attribute id = name

3. ตรวจสอบค่าว่างด้วย name.value ถ้ามีค่าว่างเปล่า แปลว่าผู้ใช้งายยังไม่กรอกข้อมูล ให้แสดง alert พร้อมกับ return false เพื่อให้โปรแกรมไม่ประมวลผลต่อ (ไม่วิ่งผ่านฟอร์ม โดยที่ยังไม่กรอกข้อมูล)