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

เบราว์เซอร์มีฟีเจอร์ในตัวสำหรับการตรวจสอบความถูกต้อง เพื่อตรวจสอบว่าผู้ใช้ป้อนข้อมูลในรูปแบบที่ถูกต้อง คุณสามารถเปิดใช้ฟีเจอร์เหล่านี้ได้โดยใช้องค์ประกอบและแอตทริบิวต์ที่ถูกต้อง นอกจากนี้คุณยังปรับปรุงการตรวจสอบแบบฟอร์มได้ด้วย 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">

แจ้งกฎการตรวจสอบความถูกต้อง

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

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

แอตทริบิวต์รูปแบบ

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

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

ในที่นี้ อนุญาตให้ใช้ตัวอักษรพิมพ์เล็กเท่านั้น ผู้ใช้จะต้องป้อนอย่างน้อยสองอักขระ แต่ไม่เกิน 20 ตัว

คุณจะเปลี่ยน pattern ให้อนุญาตให้ใช้ตัวอักษรพิมพ์ใหญ่ด้วยได้อย่างไร ลองใช้เลย

เพิ่มรูปแบบ

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

วิธีจัดรูปแบบช่องที่ต้องกรอกในแบบฟอร์ม

แสดงให้ผู้ใช้เห็นว่าต้องระบุช่องดังกล่าวก่อนที่จะโต้ตอบกับแบบฟอร์ม

คุณสามารถจัดรูปแบบฟิลด์ required ด้วยคลาสสมมติของ CSS :required

input:required {
  border: 2px solid;
}

รูปแบบการควบคุมแบบฟอร์มไม่ถูกต้อง

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

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

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

การตรวจสอบด้วย JavaScript

หากต้องการปรับปรุงการตรวจสอบความถูกต้องของแบบฟอร์มเพิ่มเติม คุณสามารถใช้ JavaScript Constraint Validation API

ส่งข้อความแสดงข้อผิดพลาดที่มีความหมาย

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

เพื่อให้บรรลุเป้าหมายนี้ ให้ใช้ setCustomValidity() ของ Constraint Validation API มาดูวิธีการทำงานกัน

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

ค้นหาองค์ประกอบที่ต้องการตั้งค่าข้อความแสดงข้อผิดพลาดที่กำหนดเอง ฟังเหตุการณ์ invalid ขององค์ประกอบที่คุณกำหนด คุณตั้งค่าข้อความกับ setCustomValidity() จากตรงนี้แล้ว ตัวอย่างนี้แสดงข้อความ Please enter your name. หากข้อมูลที่ป้อนไม่ถูกต้อง

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

คุณจะทำสิ่งต่างๆ ได้มากขึ้นด้วย Constraint Validation API คุณจะพบกับรายละเอียดในการใช้ การตรวจสอบความถูกต้องด้วย JavaScript ในโมดูลถัดไป

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งาน การตรวจสอบแบบเรียลไทม์ด้วย JavaScript ในโมดูลที่กำลังจะมาถึง

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการตรวจสอบแบบฟอร์ม

แหล่งข้อมูล

• ปิดใช้ปุ่มการชำระเงินเมื่อส่งแบบฟอร์มแล้ว
• เพิ่ม CSS เพื่อให้แบบฟอร์มทำงานได้ดีขึ้น