หน้านี้ได้รับการแปลโดย Cloud Translation API

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

:user-valid

การรองรับเบราว์เซอร์

:user-invalid

การรองรับเบราว์เซอร์

อินพุตของผู้ใช้เป็นหนึ่งในข้อกังวลที่ละเอียดอ่อนที่สุดสำหรับอินเทอร์เฟซผู้ใช้ แอปพลิเคชันที่ใช้งานได้ต้องช่วยให้ผู้ใช้เห็น เข้าใจ และแก้ไขข้อผิดพลาดในการป้อนข้อมูล ตัวเลือกคลาสจำลอง :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>

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

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

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

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

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