ส่วนการใช้รูปแบบ alert นั้น มีวิธีดังนี้
-สร้างฟอร์มขึ้นมา และในส่วนของ onsubmit ให้ return function และกำหนดชื่อว่า validateForm() คือฟังชั่นนี้จะทำงานก็ต่อเมื่อ ผู้ใช้กด submit
โค้ด: เลือกทั้งหมด
<form name="myForm" action="somepage.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
เราจะเขียน function validateForm() โดยกำหนดเงื่อนไขหากผู้ใช้ไม่กรอกข้อมูลลงใน form ให้มัน alert ขึ้นมาแจ้งเตือนผู้ใช้ และ return false เพื่อไม่ให้ submit หรือ ส่งข้อมูลไป
โค้ด: เลือกทั้งหมด
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("กรุณากรอกข้อมูลให้ครบถ้วน");
return false;
}
}
เราสามารถปรับเปลี่ยน alert โดยใช้ custom alert อย่าง sweetalert หรือ bootstrap madalได้ เพื่อความสวยงามและน่าสนใจมากขึ้น
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Form Validation ในรูปแบบ alert
-การใช้ Closing Alerts ใน Bootstrap
-JavaScript Form Validation