ช่วยให้ผู้ใช้ป้อนข้อมูลที่ถูกต้องในแบบฟอร์ม

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

เหตุใดคุณจึงควรตรวจสอบแบบฟอร์มของคุณ

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

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

คุณช่วยผู้ใช้เกี่ยวกับเรื่องนี้ได้ด้วยการกำหนดกฎการตรวจสอบความถูกต้องและแจ้งให้ผู้ใช้ทราบ

ช่วยผู้ใช้ให้กรอกข้อมูลในช่องที่ต้องกรอกโดยไม่ได้ตั้งใจ

คุณสามารถใช้ HTML เพื่อระบุรูปแบบที่ถูกต้องและข้อจำกัดสำหรับข้อมูลที่ป้อนในแบบฟอร์ม คุณต้องระบุช่องที่จำเป็นต้องกรอกด้วย

ลองส่งแบบฟอร์มนี้โดยไม่ป้อนข้อมูลใดๆ คุณเห็นข้อความแสดงข้อผิดพลาดที่แนบมากับ <input> ซึ่งแจ้งว่าต้องระบุข้อมูลในช่องนี้ไหม

ซึ่งเกิดขึ้นเนื่องจากแอตทริบิวต์ required

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

คุณได้เรียนรู้แล้วว่าคุณสามารถใช้หลายประเภทมากขึ้น เช่น type="email" มาดูอีเมลที่จําเป็น <input> กัน

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

แอตทริบิวต์ required จะบอกเบราว์เซอร์ว่าต้องระบุช่องนี้ เบราว์เซอร์ยังทดสอบว่าข้อมูลที่ป้อนตรงกับรูปแบบของ type หรือไม่ ช่องอีเมลที่แสดงในตัวอย่างจะใช้ได้ต่อเมื่อไม่ได้เว้นว่าง และถ้าข้อมูลที่ป้อนเป็นที่อยู่อีเมลที่ถูกต้อง

ช่วยให้ผู้ใช้ป้อนรูปแบบที่ถูกต้อง

ตอนนี้คุณก็เรียนรู้วิธีกำหนดให้ต้องระบุข้อมูลแล้วนะ คุณจะแนะนำเบราว์เซอร์ให้ผู้ใช้ป้อนอักขระอย่างน้อย 8 ตัวในช่องแบบฟอร์มอย่างไร

ทดลองใช้การสาธิต หลังจากเปลี่ยนแล้ว คุณไม่ควรส่งแบบฟอร์มหากป้อนอักขระน้อยกว่า 8 ตัว

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">