Error State — สถานะข้อผิดพลาดของฟิลด์คืออะไร การแสดงข้อผิดพลาดและการนำไปใช้ใน Android

สถานะข้อผิดพลาดของฟิลด์ใน Android คืออะไร?

Error State คือโหมดการแสดงผลพิเศษของฟิลด์ป้อนข้อมูลที่เปิดใช้งานเมื่อข้อมูลที่ป้อนไม่ผ่านการตรวจสอบ ทางภาพ Error State ประกอบด้วยสามองค์ประกอบ: การเปลี่ยนสีของขอบหรือพื้นหลังของฟิลด์ (โดยปกติเป็นสีแดง) การปรากฏของข้อความใต้ฟิลด์ที่อธิบายข้อผิดพลาด และตัวเลือกไอคอนหรือการเน้น วัตถุประสงค์ของ Error State คือการดึงดูดความสนใจของผู้ใช้ไปยังฟิลด์ที่มีปัญหาทันทีและแนะนำวิธีแก้ไขข้อผิดพลาด

ใน Android Error State ถูกนำไปใช้ที่ระดับ TextInputLayout จาก Material Design Components TextInputLayout ห่อหุ้ม EditText และจัดการสถานะของมัน: normal, focused, error, disabled เมธอด setError(String) สลับฟิลด์ไปยังสถานะข้อผิดพลาด เปลี่ยนสีขอบ และแสดงข้อความ เมื่อข้อความเปลี่ยนแปลงหรือเรียก setError(null) ฟิลด์จะกลับสู่สถานะ normal

ตาม Material Design Guidelines Error State ควรสังเกตเห็นได้ชัดแต่ไม่โดดเด่นเกินไป สีแดงของขอบควรตัดกันกับสถานะปกติแต่ไม่ทำให้อินเทอร์เฟซมากเกินไป ข้อความข้อผิดพลาดควรมีข้อมูลเฉพาะเกี่ยวกับปัญหาและวิธีการแก้ไข ไอคอนข้อผิดพลาด (เช่น วงกลมสีแดงที่มีเครื่องหมายอัศเจรีย์) ช่วยเสริมสัญญาณภาพ

setError ทำงานอย่างไรใน TextInputLayout

เมธอด setError(CharSequence errorText) สลับ TextInputLayout ไปยังสถานะข้อผิดพลาด พารามิเตอร์ errorText คือข้อความที่แสดงใต้ฟิลด์ หากส่งค่า null ข้อผิดพลาดจะถูกล้าง TextInputLayout จัดการแอนิเมชัน: ข้อความข้อผิดพลาดปรากฏขึ้นแบบค่อยๆ จาง ขอบเปลี่ยนเป็นสีแดง ไอคอนข้อผิดพลาด (ค่าเริ่มต้น: เครื่องหมายอัศเจรีย์ในวงกลม) จะแสดงที่ส่วนท้ายของฟิลด์

รายละเอียดสำคัญ: ต้องเรียก setErrorEnabled(true) ก่อน setError เพื่อสำรองพื้นที่สำหรับข้อความข้อผิดพลาด มิฉะนั้น เค้าโครงอาจกระโดดเมื่อข้อผิดพลาดปรากฏเนื่องจากพื้นที่ไม่ได้ถูกสำรองไว้ ขอแนะนำให้เปิดใช้งานการสนับสนุนข้อผิดพลาดใน XML ผ่าน app:errorEnabled="true" เสมอเพื่อหลีกเลี่ยงการขยับของเค้าโครง

เมธอด setError จะถูกล้างโดยอัตโนมัติเมื่อข้อความในฟิลด์เปลี่ยนแปลงหากเปิดใช้งาน setErrorEnabled(true) พฤติกรรมนี้สะดวกสำหรับการตรวจสอบแบบเรียลไทม์: ทันทีที่ผู้ใช้เริ่มแก้ไขข้อผิดพลาด ขอบสีแดงจะหายไปและฟิลด์กลับสู่สถานะปกติ อย่างไรก็ตาม สำหรับสถานการณ์ที่ซับซ้อน การล้างอัตโนมัตินี้อาจไม่เป็นที่ต้องการ — ในกรณีดังกล่าว ให้จัดการข้อผิดพลาดด้วยตนเอง

val til = findViewById<TextInputLayout>(R.id.til_email)

// เปิดใช้งานการสนับสนุนข้อผิดพลาด (ตั้งค่าใน XML มิฉะนั้น)
til.isErrorEnabled = true

// ตั้งค่าข้อความข้อผิดพลาด
til.error = "Invalid email address"

// ล้างข้อผิดพลาด
til.error = null

// ตรวจสอบว่ามีข้อผิดพลาดหรือไม่
if (til.error != null) {
    // ฟิลด์อยู่ในสถานะข้อผิดพลาด
}

ตัวอย่างใช้คุณสมบัติ Kotlin เพื่อเข้าถึง setError/isErrorEnabled TextInputLayout อัปเดต UI โดยอัตโนมัติ: เปลี่ยน boxStrokeColor แสดงไอคอนข้อผิดพลาด แสดงข้อความข้อผิดพลาด หากข้อความใน EditText เปลี่ยนแปลง ข้อผิดพลาดจะถูกล้างโดยอัตโนมัติ สำหรับการรีเซ็ตด้วยตนเอง กำหนด error = null

วิธีการแสดงข้อผิดพลาดทางเลือก

ไม่ใช่ทุกโปรเจกต์ที่ใช้ Material Design Components สำหรับ การแสดงข้อผิดพลาดแบบกำหนดเอง คุณสามารถใช้ TextView แยกต่างหากใต้ EditText ที่มองเห็นได้เมื่อเกิดข้อผิดพลาด วิธีการนี้ให้การควบคุมสไตล์และตำแหน่งข้อความอย่างสมบูรณ์ ตัวอย่างเช่น คุณสามารถวางข้อความทางขวาของฟิลด์ ใช้สีพื้นหลังที่แตกต่าง หรือเพิ่มไอคอนทางซ้ายของข้อความ

ใน Jetpack Compose Error State ถูกนำไปใช้ผ่านพารามิเตอร์ isError ใน OutlinedTextField หรือ TextField เมื่อ isError = true ขอบจะเปลี่ยนเป็นสีแดง และคุณสามารถแสดงข้อความข้อผิดพลาดผ่าน supportingText Compose ไม่มีการล้างอัตโนมัติในตัวเมื่อข้อความเปลี่ยนแปลง — นักพัฒนาจัดการสถานะข้อผิดพลาดด้วยตนเองโดยใช้ remember และ mutableStateOf

สำหรับ ข้อผิดพลาดกลุ่ม (ข้อความเดียวสำหรับหลายฟิลด์ เช่น “กรอกข้อมูลในฟิลด์ที่จำเป็นทั้งหมด”) ให้ใช้ Snackbar Dialog หรือบล็อกอินไลน์ที่ด้านบนของฟอร์ม ข้อผิดพลาดกลุ่มไม่ได้แทนที่ Error State ของแต่ละฟิลด์ แต่เสริมมัน ผู้ใช้เห็นข้อความทั่วไปก่อน จากนั้นค้นหาฟิลด์เฉพาะที่มีข้อผิดพลาด

สี ไอคอน และแอนิเมชันของข้อผิดพลาด

สีของ Error State ใน Material Design Components ถูกควบคุมผ่านแอตทริบิวต์ boxStrokeErrorColor หรือแอตทริบิวต์ colorError ในธีม โดยค่าเริ่มต้นจะใช้สีแดงของระบบ แต่สามารถแทนที่ในธีมแอปหรือโดยตรงใน TextInputLayout ผ่าน app:boxStrokeErrorColor="@color/customErrorColor" สำหรับการรองรับธีมมืด ขอแนะนำให้ใช้ตัวเลือกที่มีสีแตกต่างกันสำหรับโหมดสว่างและมืด

ไอคอนข้อผิดพลาด ถูกกำหนดค่าผ่าน app:errorIconDrawable โดยค่าเริ่มต้นจะแสดงเครื่องหมายอัศเจรีย์ในวงกลม สามารถเปลี่ยนเป็นไอคอนแบบกำหนดเองหรือลบออกทั้งหมดโดยตั้งค่า app:errorIconDrawable="@null" ไอคอนจะแสดงที่ส่วนท้ายของ TextInputLayout และทำหน้าที่เป็นเครื่องหมายภาพเพิ่มเติม ใน Material Design 3 ไอคอนข้อผิดพลาดจำเป็นสำหรับการเข้าถึง

แอนิเมชัน การปรากฏของข้อผิดพลาดถูกสร้างใน TextInputLayout: ข้อความเลื่อนขึ้นจากด้านล่างด้วยการเปลี่ยนแปลงความโปร่งใสอย่างนุ่มนวล สำหรับแอนิเมชันแบบกำหนดเอง ให้ใช้ Transition API หรือ MotionLayout ตัวอย่างเช่น การเขย่าฟิลด์เมื่อเกิดข้อผิดพลาดดึงดูดความสนใจเพิ่มเติม อย่างไรก็ตาม การใช้แอนิเมชันมากเกินไปทำให้ UX แย่ลง — การปรากฏอย่างนุ่มนวลของข้อความก็เพียงพอ

การจัดการสถานะข้อผิดพลาดระหว่างการตรวจสอบ

การจัดการ Error State แบ่งออกเป็นสองขั้นตอน: การตั้งค่าข้อผิดพลาดระหว่างการตรวจสอบฟิลด์และการล้างข้อผิดพลาดเมื่อแก้ไข ในกรณีที่ง่ายที่สุด การตรวจสอบถูกเรียกใน TextWatcher.afterTextChanged: หากค่าไม่ถูกต้อง จะเรียก setError พร้อมข้อความข้อผิดพลาด หากถูกต้อง จะเรียก setError(null) TextInputLayout จะซ่อนข้อผิดพลาดโดยอัตโนมัติเมื่อ setError(null) ล้างสถานะ

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

กฎ โฟกัสข้อผิดพลาดเดียว: เมื่อส่งฟอร์ม ให้ตั้งค่าโฟกัสเฉพาะฟิลด์แรกที่มีข้อผิดพลาด ผู้ใช้แก้ไขทีละข้อผิดพลาด และหลังจากแก้ไข ฟิลด์ถัดไปที่มีข้อผิดพลาดจะได้รับโฟกัสโดยอัตโนมัติ วิธีการทีละขั้นตอนนี้ช่วยลดภาระทางปัญญา Material TextInputLayout ไม่สกัดกั้นโฟกัสเมื่อตั้งค่าข้อผิดพลาด — ต้องทำด้วยตนเองผ่าน requestFocus()

ข้อผิดพลาดทั่วไปเมื่อทำงานกับ Error State

ข้อผิดพลาดแรก — ขาด isErrorEnabled หากไม่เรียก setErrorEnabled ก่อน setError เค้าโครงอาจขยับเมื่อข้อความข้อผิดพลาดปรากฏ โดยเฉพาะอย่างยิ่งสำคัญหากฟิลด์อยู่กลางหน้าจอ — ผู้ใช้สูญเสียตำแหน่งการเลื่อน เปิดใช้งาน setErrorEnabled(true) เสมอใน XML ผ่าน app:errorEnabled="true" หรือโดยโปรแกรมก่อนตั้งค่าข้อผิดพลาด

ข้อผิดพลาดที่สอง — ข้อความข้อผิดพลาดยาวเกินไป ข้อความยาวจะถูกตัดเป็นหลายบรรทัดและอาจทับซ้อนกับฟิลด์ข้างเคียง ความยาวข้อความข้อผิดพลาดที่แนะนำคือ 20-40 ตัวอักษร หากต้องการข้อมูลเพิ่มเติม ให้ใช้ helperText ในสถานะปกติหรือคำแนะนำเครื่องมือสำหรับคำอธิบายเพิ่มเติม ความกระชับเป็นพื้นฐานของ Error State ที่ดี

ข้อผิดพลาดที่สาม — ละเลยการเข้าถึง Error State ต้องสามารถเข้าถึงได้สำหรับโปรแกรมอ่านหน้าจอ TextInputLayout ประกาศข้อผิดพลาดโดยอัตโนมัติผ่าน contentDescription แต่การนำไปใช้แบบกำหนดเองต้องทำด้วยตนเอง ใช้ announceForAccessibility() หรือ android:importantForAccessibility สำหรับข้อความข้อผิดพลาด ผู้ใช้ TalkBack ควรได้ยินข้อผิดพลาดทันทีหลังจากที่ปรากฏ