Error State — apa itu, menampilkan kesalahan bidang dan implementasi di Android

Apa itu status kesalahan bidang di Android?

Error State adalah mode tampilan khusus bidang input yang diaktifkan ketika data yang dimasukkan tidak lolos validasi. Secara visual, Error State mencakup tiga komponen: perubahan warna garis tepi atau latar belakang bidang (biasanya merah), munculnya pesan teks di bawah bidang dengan deskripsi kesalahan, dan secara opsional — ikon atau penyorotan. Tujuan Error State adalah untuk segera menarik perhatian pengguna ke bidang yang bermasalah dan memberikan petunjuk cara memperbaiki kesalahan.

Di Android, Error State diimplementasikan di tingkat TextInputLayout dari Material Design Components. TextInputLayout membungkus EditText dan mengelola statusnya: normal, focused, error, disabled. Metode setError(String) mengalihkan bidang ke status kesalahan, mengubah warna bingkai, dan menampilkan pesan. Saat teks berubah atau setError(null) dipanggil, bidang kembali ke normal.

Menurut Material Design Guidelines, Error State harus terlihat tetapi tidak dominan. Warna merah bingkai harus kontras dengan status normal, tetapi tidak membebani antarmuka. Pesan kesalahan harus berisi informasi spesifik tentang masalah dan cara mengatasinya. Ikon kesalahan (misalnya lingkaran merah dengan tanda seru) memperkuat sinyal visual.

Bagaimana cara kerja setError di TextInputLayout

Metode setError(CharSequence errorText) mengalihkan TextInputLayout ke status kesalahan. Parameter errorText adalah teks yang ditampilkan di bawah bidang. Jika null dikirimkan, kesalahan direset. TextInputLayout mengelola animasi: teks kesalahan muncul dengan transisi halus, bingkai berubah menjadi merah. Ikon kesalahan (secara default tanda seru dalam lingkaran) ditampilkan di akhir bidang.

Detail penting: setErrorEnabled(true) harus dipanggil sebelum setError untuk mereservasi ruang bagi pesan kesalahan. Jika tidak, saat kesalahan muncul, tata letak mungkin melompat karena ruang untuk pesan tidak disediakan. Disarankan untuk selalu mengaktifkan dukungan kesalahan di XML melalui app:errorEnabled="true" untuk menghindari pergeseran tata letak.

Metode setError secara otomatis direset saat teks bidang berubah jika opsi setErrorEnabled(true) diaktifkan. Perilaku ini berguna untuk validasi waktu nyata: segera setelah pengguna mulai memperbaiki kesalahan, bingkai merah menghilang dan bidang kembali ke status normal. Namun untuk skenario kompleks, pengaturan ulang otomatis ini mungkin tidak diinginkan — dalam kasus seperti itu, kelola kesalahan secara manual.

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

// Aktifkan dukungan kesalahan (atur di XML jika tidak)
til.isErrorEnabled = true

// Atur pesan kesalahan
til.error = "Invalid email address"

// Hapus kesalahan
til.error = null

// Periksa apakah kesalahan ada
if (til.error != null) {
    // Bidang dalam status kesalahan
}

Dalam contoh ini, properti Kotlin digunakan untuk mengakses setError/isErrorEnabled. TextInputLayout secara otomatis memperbarui UI: mengubah warna boxStrokeColor, menampilkan ikon kesalahan, menampilkan teks kesalahan. Jika Anda mengubah teks di EditText, kesalahan akan direset secara otomatis. Untuk pengaturan ulang manual, tetapkan error = null.

Cara alternatif menampilkan kesalahan

Tidak semua proyek menggunakan Material Design Components. Untuk tampilan kustom kesalahan, Anda dapat menggunakan TextView terpisah di bawah EditText yang menjadi terlihat saat terjadi kesalahan. Pendekatan ini memberikan kontrol penuh atas gaya dan posisi pesan. Misalnya, Anda dapat menempatkan pesan di sebelah kanan bidang, menggunakan warna latar belakang yang berbeda, atau menambahkan ikon di sebelah kiri teks.

Di Jetpack Compose, Error State diimplementasikan melalui parameter isError di OutlinedTextField atau TextField. Saat isError = true, bingkai menjadi merah dan Anda dapat menampilkan teks kesalahan melalui supportingText. Compose tidak memiliki penghapusan otomatis saat teks berubah — pengembang mengelola status kesalahan secara manual melalui remember dan mutableStateOf.

Untuk kesalahan grup (satu pesan untuk beberapa bidang, misalnya “Isi semua bidang wajib”) digunakan Snackbar, Dialog, atau blok inline di bagian atas formulir. Kesalahan grup tidak menggantikan Error State bidang individu, tetapi melengkapinya. Pengguna pertama-tama melihat pesan umum, kemudian mencari bidang spesifik dengan kesalahan.

Warna, ikon, dan animasi kesalahan

Warna Error State di Material Design Components dikelola melalui atribut boxStrokeErrorColor atau atribut colorError di tema. Secara default, warna merah sistem digunakan, tetapi dapat diganti di tema aplikasi atau langsung di TextInputLayout melalui app:boxStrokeErrorColor="@color/customErrorColor". Untuk dukungan tema gelap, disarankan menggunakan pemilih dengan warna berbeda untuk mode terang dan gelap.

Ikon kesalahan dikonfigurasi melalui app:errorIconDrawable. Secara default, tanda seru dalam lingkaran ditampilkan. Dapat diganti dengan ikon kustom atau dihapus sepenuhnya dengan mengatur app:errorIconDrawable="@null". Ikon ditampilkan di akhir TextInputLayout dan berfungsi sebagai penanda visual tambahan. Di Material Design 3, ikon kesalahan wajib untuk aksesibilitas.

Animasi kemunculan kesalahan tertanam di TextInputLayout: teks muncul dari bawah dengan perubahan opacity bertahap. Untuk animasi kustom, gunakan Transition API atau MotionLayout. Misalnya, goyangan bidang saat kesalahan menarik perhatian tambahan. Namun penyalahgunaan animasi memperburuk UX — kemunculan pesan yang halus sudah cukup.

Mengelola status kesalahan saat validasi

Pengelolaan Error State terbagi menjadi dua tahap: mengatur kesalahan saat validasi bidang dan mereset kesalahan saat perbaikan. Dalam kasus paling sederhana, validasi dipanggil di TextWatcher.afterTextChanged: jika nilai tidak valid, setError dipanggil dengan pesan kesalahan. Jika valid — setError(null). TextInputLayout secara otomatis menyembunyikan kesalahan saat setError(null) mereset status.

Untuk validasi formulir, kesalahan diatur pada tahap pengiriman formulir. Melakukan iterasi semua bidang, memeriksa masing-masing, mengatur kesalahan untuk bidang yang tidak valid, dan fokus pada bidang pertama yang salah. Tombol kirim diblokir saat ini. Jika formulir besar, disarankan untuk menggulir layar ke bidang pertama dengan kesalahan dan secara otomatis memberikan fokus padanya.

Aturan single error focus: saat mengirim formulir, atur fokus hanya pada bidang pertama dengan kesalahan. Pengguna memperbaiki satu kesalahan dalam satu waktu, dan setelah perbaikan, bidang berikutnya dengan kesalahan secara otomatis mendapatkan fokus. Pendekatan langkah demi langkah ini mengurangi beban kognitif. Material TextInputLayout tidak mengambil fokus saat mengatur kesalahan — ini harus dilakukan secara manual melalui requestFocus().

Kesalahan saat bekerja dengan Error State

Kesalahan pertama — tidak ada isErrorEnabled. Jika setErrorEnabled tidak dipanggil sebelum setError, tata letak dapat bergeser saat pesan kesalahan muncul. Hal ini sangat kritis jika bidang berada di tengah layar — pengguna kehilangan posisi gulir. Selalu aktifkan setErrorEnabled(true) di XML melalui app:errorEnabled="true" atau secara terprogram sebelum mengatur kesalahan.

Kesalahan kedua — pesan kesalahan terlalu panjang. Teks panjang terbagi menjadi beberapa baris dan dapat menutupi bidang yang berdekatan. Panjang pesan kesalahan yang disarankan adalah 20-40 karakter. Jika diperlukan informasi lebih lanjut, gunakan helperText (petunjuk) dalam status normal atau tooltip untuk penjelasan tambahan. Singkatnya adalah dasar Error State yang baik.

Kesalahan ketiga — mengabaikan aksesibilitas. Error State harus dapat diakses oleh pembaca layar. TextInputLayout secara otomatis mengumumkan kesalahan melalui contentDescription, tetapi implementasi kustom harus melakukannya secara manual. Gunakan announceForAccessibility() atau android:importantForAccessibility untuk pesan kesalahan. Pengguna TalkBack harus mendengar kesalahan segera setelah muncul.