คลาสจำลอง :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