Memvalidasi Input
Periksa input dan tampilkan error yang membantu.
Memvalidasi Input adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.
Mengapa Input Perlu Divalidasi
Pengguna dapat melakukan kesalahan: nama kosong, email dengan format salah, atau kata sandi terlalu pendek. Form yang baik mendeteksi kesalahan ini sejak awal dan menjelaskan dengan jelas apa yang perlu diperbaiki.
Dalam pelajaran ini, Anda akan menambahkan validasi ke form Compose, menampilkan error sebaris, dan menonaktifkan tombol kirim sampai semuanya valid.
Aturan Validasi Hanyalah Sebuah Fungsi
Simpan logika validasi sebagai fungsi Kotlin biasa yang menerima sebuah nilai dan mengembalikan apakah nilai tersebut valid (atau pesan error). Dengan demikian, aturan dapat digunakan kembali dan mudah diuji.
Berikut pemeriksaan email sederhana.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}Menampilkan Error pada Kolom
OutlinedTextField memiliki flag isError dan slot supportingText. Gabungkan keduanya untuk menampilkan kolom berwarna merah dengan pesan di bawahnya.
Error tersebut berasal langsung dari fungsi validasi Anda.
var email by remember { mutableStateOf("") }
val error = emailError(email)
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
isError = error != null,
supportingText = { if (error != null) Text(error) }
)Jangan Memberi Peringatan Terlalu Dini
Menampilkan "Email wajib diisi" sebelum pengguna menyentuh kolom tersebut akan terasa tidak bersahabat. Solusi yang umum adalah melacak apakah kolom telah touched, lalu hanya menampilkan error setelahnya.
Di sini, kolom ditandai telah disentuh setelah kehilangan fokus.
var email by remember { mutableStateOf("") }
var touched by remember { mutableStateOf(false) }
val error = if (touched) emailError(email) else null
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
isError = error != null,
modifier = Modifier.onFocusChanged {
if (!it.isFocused) touched = true
}
)Memvalidasi Kata Sandi
Kata sandi biasanya memiliki beberapa aturan. Kembalikan aturan pertama yang gagal agar pengguna memperbaiki satu hal dalam satu waktu.
Perhatikan bahwa ini tetap merupakan fungsi murni tanpa UI di dalamnya.
fun passwordError(pw: String): String? = when {
pw.length < 8 -> "At least 8 characters"
pw.none { it.isDigit() } -> "Add a number"
pw.none { it.isUpperCase() } -> "Add an uppercase letter"
else -> null
}Validasi Antar-Kolom
Beberapa aturan melibatkan dua kolom, seperti "konfirmasi kata sandi harus sama dengan kata sandi". Aturan ini tidak dapat ditempatkan dalam fungsi untuk satu kolom, jadi hitunglah saat kedua nilai tersedia.
var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }
val confirmError =
if (confirm.isNotEmpty() && confirm != password)
"Passwords don't match"
else nullMenonaktifkan Pengiriman hingga Valid
Seluruh form valid jika setiap aturan terpenuhi. Hitung satu nilai boolean dan gunakan untuk mengaktifkan atau menonaktifkan tombol kirim.
Dengan begitu, pengguna tidak dapat mengirim data yang salah sejak awal.
val formValid =
emailError(email) == null &&
passwordError(password) == null &&
confirmError == null
Button(onClick = { submit() }, enabled = formValid) {
Text("Create Account")
}Memvalidasi Saat Dikirim
Validasi sebaris membantu pengguna, tetapi Anda juga harus memeriksa ulang semuanya saat mereka menekan tombol kirim. Penangan kirim menentukan apakah proses dilanjutkan atau semua error ditampilkan sekaligus.
fun onSubmit() {
val errors = listOfNotNull(
emailError(email),
passwordError(password)
)
if (errors.isEmpty()) {
register(email, password)
} else {
// show errors / mark fields touched
}
}Membatasi Hal yang Dapat Diketik
Validasi juga dapat bersifat pencegahan. Untuk nomor telepon, cukup abaikan karakter non-digit di dalam onValueChange agar input yang salah tidak pernah masuk ke state.
Ini lebih bersahabat daripada menegur pengguna setelahnya.
var phone by remember { mutableStateOf("") }
OutlinedTextField(
value = phone,
onValueChange = { input ->
phone = input.filter { it.isDigit() }.take(10)
},
label = { Text("Phone") }
)Memusatkan Validasi di ViewModel
Untuk layar nyata, simpan validasi di dalam ViewModel agar UI hanya menampilkan hasilnya. ViewModel menyediakan error dan flag isValid.
Dengan demikian, composable tetap sederhana dan aturan Anda dapat diuji sebagai unit.
class SignUpViewModel : ViewModel() {
var email by mutableStateOf("")
private set
val emailError: String?
get() = emailError(email)
val isValid: Boolean
get() = emailError == null && email.isNotBlank()
fun onEmailChange(value: String) { email = value }
}Kotlin Murni: Menguji Aturan
Karena validator merupakan fungsi murni, Anda dapat menjalankannya di mana saja. Di sini, aturan email dan kata sandi dijalankan secara mandiri, seperti saat pengujian unit memanggilnya.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}
fun main() {
println(emailError(""))
println(emailError("nope"))
println(emailError("ada@dev.io"))
}Pemeriksaan Singkat
Pasangan properti apa pada OutlinedTextField yang digunakan untuk menandai kolom sebagai tidak valid dan menampilkan pesan di bawahnya?
Ringkasan
Sekarang Anda dapat memvalidasi form Compose dengan rapi:
- Simpan aturan sebagai fungsi murni yang mengembalikan pesan error atau null.
- Tampilkan error dengan
isError+supportingText, dan hindari memberi peringatan sebelum kolom disentuh. - Tangani aturan antar-kolom saat kedua nilai terlihat.
- Nonaktifkan pengiriman sampai seluruh form valid, lalu periksa ulang saat dikirim.
- Cegah input yang salah dengan
filter, dan pusatkan aturan di ViewModel.
Berikutnya: tipe keyboard, tindakan IME, dan pengelolaan fokus.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Memvalidasi Input” gratis?
Ya — teks lengkap “Memvalidasi Input” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Memvalidasi Input”?
Periksa input dan tampilkan error yang membantu. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Android Academy?
Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Memvalidasi Input” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?
Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.