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

เผยแพร่เมื่อวันที่ 8 พฤศจิกายน 2023

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

ตัวเลือกคลาสจำลองการโต้ตอบของผู้ใช้

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

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

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

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

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>

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

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

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

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

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

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