ตรวจสอบฟอร์ม Form ก่อน Submit HTML

สอนเขียนโค้ดตรวจสอบฟอร์ม Form ก่อน Submit ภาษา HTML โดยใช้ attribute onsubmit เมื่อผู้ใช้งานกดปุ่ม submit ฟังก์ชันที่กำหนดใน onsubmit จะถูกเรียกขึ้นมาเพื่อเช็คค่าว่าง หรือประมวลผลก่อน submit สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ตรวจสอบฟอร์ม Form ก่อน Submit HTML

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

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

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

2. ฟังก์ชัน checkValue จะเช็คว่าช่องกรอก id = name มีค่าว่างเปล่าหรือไม่ กรณีเป็นค่าว่างเปล่าจะคืนค่า return false ทำให้การกด submit ถูกยกเลิก เพื่อให้ผู้ใช้งานกรอกข้อมูลให้ถูกต้องใหม่