:user-valid
:user-invalid
ข้อมูลจากผู้ใช้เป็นหนึ่งในข้อกังวลที่ละเอียดอ่อนมากที่สุดในอินเทอร์เฟซผู้ใช้ใดๆ แอปพลิเคชันที่ใช้งานได้ต้องช่วยให้ผู้ใช้เห็น เข้าใจ และแก้ไขข้อผิดพลาดในข้อมูลที่ป้อน ตัวเลือกคลาสเทียม :user-valid
และ :user-invalid
ช่วยปรับปรุงประสบการณ์ของผู้ใช้ในการตรวจสอบความถูกต้องของอินพุตด้วยการแสดงความคิดเห็นเกี่ยวกับข้อผิดพลาดหลังจากที่ผู้ใช้เปลี่ยนอินพุตแล้วเท่านั้น ตัวเลือกใหม่เหล่านี้ช่วยให้คุณไม่ต้องเขียนโค้ดการเก็บสถานะเพื่อติดตามอินพุตที่ผู้ใช้เปลี่ยนแปลงอีกต่อไป
ตัวเลือกคลาส Pseudo สำหรับการโต้ตอบของผู้ใช้
ตัวเลือกคลาส Pseudo ของ :user-valid
และ :user-invalid
คล้ายกับคลาส Pseudo-class ของ :valid
และ :invalid
ที่มีอยู่ ทั้ง 2 แบบจะตรงกับการควบคุมแบบฟอร์มโดยพิจารณาว่าค่าปัจจุบันตรงกับข้อจำกัดการตรวจสอบของตนหรือไม่ อย่างไรก็ตาม ข้อได้เปรียบของคลาสเทียม :user-valid
และ :user-invalid
ใหม่คือจะจับคู่ตัวควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสำคัญเท่านั้น
ตัวควบคุมแบบฟอร์มที่จำเป็นและว่างเปล่าจะตรงกับ :invalid
แม้ว่าผู้ใช้ยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม แต่การควบคุมแบบฟอร์มเดียวกันจะไม่ตรงกับ :user-invalid
จนกว่าผู้ใช้จะเปลี่ยนแปลงอินพุตและปล่อยให้อยู่ในสถานะที่ไม่ถูกต้อง
ใช้คลาสซูโด :user-valid
และ :user-invalid
ใช้คลาส Pseudo เหล่านี้เพื่อจัดรูปแบบการควบคุมอินพุต เลือก และพื้นที่ข้อความ ดังที่แสดงในตัวอย่างต่อไปนี้
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
ตัวเลือกจะจับคู่ตามการโต้ตอบของผู้ใช้และข้อจำกัดในการตรวจสอบร่วมกัน โต้ตอบกับการสาธิตต่อไปนี้เพื่อดูการทำงาน
ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นเมื่อใช้โค้ดน้อยลง
หากไม่มีคลาส Pseudo เหล่านี้ การสร้างประสบการณ์ของผู้ใช้ที่เปิดใช้โดย :user-valid
และ :user-invalid
ก็จำเป็นต้องเขียนโค้ดแบบเก็บสถานะเพิ่มเติม โค้ดดังกล่าวซึ่งจำเป็นต่อการติดตามค่าเริ่มต้น สถานะโฟกัสปัจจุบันของอินพุต ขอบเขตการเปลี่ยนแปลงค่าของผู้ใช้ ดำเนินการตรวจสอบความถูกต้องเพิ่มเติม และเพิ่มคลาสเพื่อเลือกการจัดรูปแบบ ตอนนี้คุณก็อาศัยเบราว์เซอร์
ในการจัดการทั้งหมดนี้โดยอัตโนมัติได้แล้ว
แหล่งข้อมูลเพิ่มเติม
- :user-Valid - เอกสารเว็บ MDN
- :ผู้ใช้ไม่ถูกต้อง - เอกสารเว็บ MDN
- คลาส Pseudo สำหรับการโต้ตอบของผู้ใช้ - ฉบับร่างของเครื่องมือแก้ไข W3C
- การตรวจสอบข้อจำกัดของแบบฟอร์ม - เอกสารเว็บ MDN
- บทแนะนำการช่วยเหลือพิเศษของฟอร์ม - โครงการริเริ่มเกี่ยวกับการช่วยเหลือพิเศษในเว็บ
รูปภาพปกโดย Behzad Ghaffarian ใน Unsplash