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

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

ตัวอย่าง:

<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>

ทั้ง Full Name และ Email มีแอตทริบิวต์ required ในโค้ดข้างต้น

ตอนนี้ หากผู้ใช้คลิกปุ่ม Submit Form โดยไม่กรอกทั้งสองช่องที่จำเป็น จะได้ Popup Warning ดังนี้: