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