คลาสจำลอง :user-valid และ :user-invalid

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

ตัวเลือกคลาสเทียมสำหรับการโต้ตอบของผู้ใช้

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

การควบคุมแบบฟอร์มที่ต้องกรอกและว่างเปล่าจะตรงกับ :invalid แม้ว่าผู้ใช้จะยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม แต่การควบคุมแบบฟอร์มเดียวกันนั้นจะไม่ ตรงกับ :user-invalid จนกว่าผู้ใช้จะเปลี่ยนข้อมูลที่ป้อนและเก็บไว้ใน สถานะไม่ถูกต้อง

ใช้คลาสเทียม :user-valid และ :user-invalid

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

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>

ตัวเลือกจะจับคู่ตามการโต้ตอบของผู้ใช้และข้อจำกัดการตรวจสอบ โต้ตอบกับการสาธิตต่อไปนี้เพื่อดูการทำงานจริง:

ประสบการณ์ของผู้ใช้ที่ดีขึ้นด้วยโค้ดที่น้อยลง

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

แหล่งข้อมูลเพิ่มเติม

• :user-valid - MDN web docs
• :user-invalid - MDN web docs
• Pseudo-class สำหรับการโต้ตอบของผู้ใช้ - ฉบับร่างของเครื่องมือแก้ไข W3C
• การตรวจสอบข้อจำกัดของแบบฟอร์ม - MDN Web Docs
• บทแนะนำเกี่ยวกับการช่วยเหลือพิเศษของฟอร์ม - โครงการริเริ่มเกี่ยวกับการช่วยเหลือพิเศษบนเว็บ

รูปภาพปกโดย Behzad Ghaffarian จาก Unsplash