วิธีหยุดไม่ให้ผู้ใช้ส่งแบบฟอร์มโดยไม่ต้องกรอกข้อมูลในฟิลด์ที่จำเป็นทั้งหมด

หากต้องการหยุดไม่ให้ผู้ใช้ส่งแบบฟอร์มโดยไม่ต้องกรอกข้อมูลทุกช่องที่จำเป็น เพียงเพิ่ม required แอตทริบิวต์ขององค์ประกอบอินพุตที่พวกเขา ต้องกรอกเพื่อส่ง:

ตัวอย่าง:

<form id="form">
  <input type="text" name="full-name" placeholder="Full name" required />
  <input type="text" name="email" placeholder="Email" required />
  <input type="text" name="phone-number" placeholder="Phone number" />
  <button id="button-submit-form" type="submit">
    Submit Form
  </button>
</form>

ทั้ง ชื่อเต็ม และ อีเมล มี required แอตทริบิวต์ในโค้ดด้านบน

ตอนนี้หากผู้ใช้คลิกที่ ส่งแบบฟอร์ม ปุ่มโดยไม่ต้องกรอกทั้งสองฟิลด์ที่จำเป็น พวกเขาได้รับคำเตือนป๊อปอัปต่อไปนี้: