การสร้าง Form Validation ในรูปแบบ alert

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

การสร้าง Form Validation ในรูปแบบ alert

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

สำหรับการดักvalidation ของ form เราสามารถทำได้หลายรูปแบบ และมี plugin มากมายให้เลือกใช้ หากไม่ต้องการใช้ javascript ยังมีอีกวิธีหนึ่งคือ การใช้ HTML5 Validation ตามรูปแบบที่กำหนด แทนการใช้ javascript

ส่วนการใช้รูปแบบ 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>
ในส่วนโค้ดของ javascript
เราจะเขียน function validateForm() โดยกำหนดเงื่อนไขหากผู้ใช้ไม่กรอกข้อมูลลงใน form ให้มัน alert ขึ้นมาแจ้งเตือนผู้ใช้ และ return false เพื่อไม่ให้ submit หรือ ส่งข้อมูลไป

โค้ด: เลือกทั้งหมด

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("กรุณากรอกข้อมูลให้ครบถ้วน");
    return false;
  }
}
ผลลัพธ์ ถ้าหากผู้ใช้ไม่ได้กรอกข้อมูล แต่กดปุ่ม submit แล้ว
form validate.jpg
form validate.jpg (14.23 KiB) Viewed 2322 times
เพียงเท่านี้เราก็สามารถดักไม่ให้ส่งข้อมูลพร้อมแจ้งไปยังผู้ใช้ ถ้าหากกรอกข้อมูลไม่ครบถ้วน
เราสามารถปรับเปลี่ยน alert โดยใช้ custom alert อย่าง sweetalert หรือ bootstrap madalได้ เพื่อความสวยงามและน่าสนใจมากขึ้น

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Form Validation ในรูปแบบ alert
-การใช้ Closing Alerts ใน Bootstrap
-JavaScript Form Validation
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 25