เบราว์เซอร์มีฟีเจอร์ในตัวสำหรับการตรวจสอบความถูกต้อง เพื่อตรวจสอบว่าผู้ใช้ป้อนข้อมูลในรูปแบบที่ถูกต้อง คุณสามารถเปิดใช้ฟีเจอร์เหล่านี้ได้โดยใช้องค์ประกอบและแอตทริบิวต์ที่ถูกต้อง นอกจากนี้คุณยังปรับปรุงการตรวจสอบแบบฟอร์มได้ด้วย 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">
ชื่อของแอตทริบิวต์คือ minlength
ตั้งค่าเป็น 8
และคุณมีกฎการตรวจสอบที่ต้องการ
หากคุณต้องการตรงกันข้าม ให้ใช้ maxlength
แจ้งกฎการตรวจสอบความถูกต้อง
<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
ให้อนุญาตให้ใช้ตัวอักษรพิมพ์ใหญ่ด้วยได้อย่างไร
ลองใช้เลย
คำตอบที่ถูกต้องคือ pattern="[a-zA-Z]{2,20}"
เพิ่มรูปแบบ
ตอนนี้คุณก็ได้เรียนรู้วิธีเพิ่มการตรวจสอบใน 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 ในโมดูลที่กำลังจะมาถึง
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการตรวจสอบแบบฟอร์ม
คุณใช้แอตทริบิวต์ใดเพื่อกำหนดให้บังคับการควบคุมแบบฟอร์ม
required
needed
essential
obligatory
คุณระบุข้อความแสดงข้อผิดพลาดของคุณเองได้ไหม
message
:invalid
คุณส่ง <input>
ที่มี type="email"
และแอตทริบิวต์ required
ได้โดยทำดังนี้