Validación de entradas
Compruebe las entradas y muestre errores útiles
Validación de entradas es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.
Por qué validar las entradas
Los usuarios cometen errores: un nombre vacío, un correo electrónico con formato incorrecto o una contraseña demasiado corta. Las buenas formas detectan estos problemas pronto y explican claramente qué debe corregirse.
En esta lección añadirá validación a las formas de Compose, mostrará errores en línea y desactivará el botón de envío hasta que todo sea válido.
Una regla de validación es solo una función
Mantenga la lógica de validación en funciones normales de Kotlin que reciban un valor y devuelvan si es válido (o un mensaje de error). Así, las reglas se pueden reutilizar y probar fácilmente.
Aquí tiene una comprobación sencilla de correo electrónico.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}Mostrar el error en el campo
OutlinedTextField tiene una propiedad isError y un slot supportingText. Combínelos para mostrar un campo en rojo con un mensaje debajo.
El error procede directamente de su función de validación.
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) }
)No alerte demasiado pronto
Mostrar "El correo electrónico es obligatorio" antes de que el usuario siquiera haya tocado el campo resulta poco acogedor. Una solución habitual consiste en registrar si el campo ha sido tocado y mostrar los errores solo después.
Aquí marcamos el campo como tocado cuando pierde el foco.
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
}
)Validar una contraseña
Las contraseñas suelen tener varias reglas. Devuelva la primera regla que falle para que el usuario corrija un problema cada vez.
Observe que sigue siendo una función pura, sin ninguna interfaz de usuario dentro.
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
}Validación entre campos
Algunas reglas implican dos campos, como "la confirmación de la contraseña debe coincidir con la contraseña". Estas reglas no pueden residir en una función para un solo campo, así que calcúlelas donde ambos valores estén disponibles.
var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }
val confirmError =
if (confirm.isNotEmpty() && confirm != password)
"Passwords don't match"
else nullDesactivar el envío hasta que sea válido
La forma completa es válida cuando se cumplen todas las reglas. Calcule un único booleano y úselo para habilitar o deshabilitar el botón de envío.
Así evita que el usuario envíe datos incorrectos desde el principio.
val formValid =
emailError(email) == null &&
passwordError(password) == null &&
confirmError == null
Button(onClick = { submit() }, enabled = formValid) {
Text("Create Account")
}Validar al enviar
La validación en línea guía al usuario, pero también debe volver a comprobarlo todo cuando pulse enviar. El controlador de envío decide si debe continuar o mostrar todos los errores a la vez.
fun onSubmit() {
val errors = listOfNotNull(
emailError(email),
passwordError(password)
)
if (errors.isEmpty()) {
register(email, password)
} else {
// show errors / mark fields touched
}
}Restringir lo que se puede escribir
La validación también puede ser preventiva. Para un número de teléfono, simplemente ignore los caracteres que no sean dígitos dentro de onValueChange, de modo que la entrada incorrecta nunca llegue al estado.
Esto resulta más amable que reprender al usuario después.
var phone by remember { mutableStateOf("") }
OutlinedTextField(
value = phone,
onValueChange = { input ->
phone = input.filter { it.isDigit() }.take(10)
},
label = { Text("Phone") }
)Centralizar la validación en el ViewModel
En pantallas reales, mantenga la validación en el ViewModel para que la interfaz solo muestre los resultados. El ViewModel expone los errores y una marca isValid.
Así los composables se mantienen simples y las reglas se pueden probar mediante pruebas unitarias.
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 puro: probar las reglas
Como los validadores son funciones puras, puede ejecutarlos en cualquier lugar. Aquí las reglas del correo electrónico y de la contraseña se ejecutan de forma independiente, igual que las invocaría una prueba unitaria.
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"))
}Comprobación rápida
¿Qué par de propiedades de OutlinedTextField se utiliza para marcar un campo como no válido y mostrar un mensaje debajo?
Repaso
Ahora puede validar las formas de Compose de forma clara:
- Mantenga las reglas como funciones puras que devuelvan un mensaje de error o null.
- Muestre los errores con
isError+supportingTexty evite mostrarlos antes de que se toque el campo. - Gestione las reglas entre campos donde ambos valores estén disponibles.
- Desactive el envío hasta que toda la forma sea válida y vuelva a comprobarla al enviarla.
- Evite las entradas incorrectas con
filtery centralice las reglas en un ViewModel.
A continuación: tipos de teclado, acciones IME y gestión del foco.
Preguntas frecuentes
¿La lección «Validación de entradas» es gratis?
Sí — el texto completo de «Validación de entradas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Validación de entradas»?
Compruebe las entradas y muestre errores útiles Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Android Academy?
No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Validación de entradas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Android Academy?
Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- TextField y entrada del usuario
- Gestión del estado de formularios
- Validación de entradas
- Opciones y acciones del teclado