Jetpack Compose Academy · Pelajaran

Validasi Sebaris & State Error

Berikan umpan balik seketika untuk input yang salah.

Pelajaran 4 dari 413 langkah

Validasi Sebaris & State Error adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Tangani Kesalahan Sejak Dini

Formulir yang baik memperbaiki masalah saat pengguna mengetik, bukan setelah mereka mengetuk kirim. Validasi sebaris berarti umpan balik yang langsung dan lembut. ✅

Hitung Validitas dari Status

Turunkan penanda isError langsung dari nilai saat ini. Saat email terlihat salah, penanda tersebut berubah menjadi true.

val isError = email.isNotEmpty() && !email.contains("@")

Parameter isError

Teruskan penanda tersebut ke parameter isError pada kolom. Compose kemudian memberi warna merah pada batas dan label untuk menandakan masalah.

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    isError = isError
)

Jelaskan Masalahnya

Batas merah saja masih kurang jelas. Gunakan supportingText untuk menjelaskan tepatnya apa yang salah agar pengguna dapat memperbaikinya.

supportingText = {
    if (isError) Text("Enter a valid email.")
}

Tampilkan Kesalahan pada Waktu yang Tepat

Jangan menegur kolom yang masih kosong. Lakukan validasi hanya setelah pengguna mengetik, sehingga kesalahan muncul saat benar-benar berguna.

Tambahkan Ikon Kesalahan

trailingIcon memperkuat pesan tersebut. Ganti dengan ikon peringatan saat kolom berada dalam kondisi kesalahan.

trailingIcon = {
    if (isError) Icon(Icons.Default.Warning, "Error")
}

Validasi Banyak Kolom

Setiap kolom memiliki penandanya sendiri. Gabungkan penanda tersebut untuk mengetahui apakah seluruh formulir valid dan siap dikirim.

val formValid = emailValid && passwordValid

Batasi Tombol Kirim

Hubungkan penanda enabled pada tombol dengan validitas formulir. Pengguna tidak dapat mengirim formulir sampai setiap kolom lolos pemeriksaan.

Button(onClick = ::submit, enabled = formValid) {
    Text("Sign Up")
}

Buat Pesan Tetap Ramah

Tulis teks kesalahan yang membantu, bukan menyalahkan. “Kata sandi terlalu pendek” selalu lebih baik daripada “Input tidak valid”.

Validasi Hanyalah Status

Perhatikan polanya: kesalahan adalah nilai biasa yang diturunkan dari status. Tidak ada keajaiban, hanya model Compose yang sama seperti yang sudah Anda kenal.

Formulir Nyata Terasa Tepercaya

Umpan balik yang jelas dan tepat waktu membangun kepercayaan. Pengguna merasa dibimbing, bukan diuji, dan dapat menyelesaikan formulir Anda dengan mudah.

Pemeriksaan Singkat

Bagaimana cara mengubah batas kolom teks menjadi merah untuk menandakan masalah?

Jawab di pelajaran interaktif

Rangkuman

Anda membuat validasi sebaris: turunkan penanda kesalahan, atur isError, jelaskan dengan teks pendukung, dan batasi pengiriman berdasarkan validitas. Formulir yang terasa nyaman digunakan. 🌟

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Validasi Sebaris & State Error” gratis?

Ya — teks lengkap “Validasi Sebaris & State Error” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Validasi Sebaris & State Error”?

Berikan umpan balik seketika untuk input yang salah. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 4 dari 4.

Berapa lama pelajaran “Validasi Sebaris & State Error” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy