Valida la entrada a medida que el usuario escribe

Puedes validar la entrada mientras el usuario escribe en un campo de texto, como ingresar un nombre, un correo electrónico, una dirección o cualquier otra información de contacto. Esta validación reduce los errores y ahorra tiempo a los usuarios.

Resultados

Una entrada de texto válida — **Figura 1.** Un campo de entrada de texto con validadores de correo electrónico que no muestra mensajes de error para una dirección de correo electrónico válida

Una entrada de texto no válida con errores — **Figura 2:** Un campo de entrada de texto que muestra un mensaje de error cuando se ingresa una dirección de correo electrónico no válida

Compatibilidad de versiones

Esta implementación requiere que tu minSDK del proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Valida la entrada mientras el usuario escribe

Usa el siguiente código para mostrar la entrada del campo y validar el texto mientras el usuario escribe. Si la información no se valida, un mensaje de error ayuda al usuario a corregir la entrada.

class EmailViewModel : ViewModel() {
    var email by mutableStateOf("")
        private set

    val emailHasErrors by derivedStateOf {
        if (email.isNotEmpty()) {
            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
        } else {
            false
        }
    }

    fun updateEmail(input: String) {
        email = input
    }
}

@Composable
fun ValidatingInputTextField(
    email: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        value = email,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,
        supportingText = {
            if (validatorHasErrors) {
                Text("Incorrect email format.")
            }
        }
    )
}

@Preview
@Composable
fun ValidateInput() {
    val emailViewModel: EmailViewModel = viewModel<EmailViewModel>()
    ValidatingInputTextField(
        email = emailViewModel.email,
        updateState = { input -> emailViewModel.updateEmail(input) },
        validatorHasErrors = emailViewModel.emailHasErrors
    )
}TextSnippets.kt

Puntos clave sobre el código

Define un elemento componible que reutiliza el componente OutlinedTextField y agrega los parámetros necesarios para mostrar mensajes de error del validador mientras el usuario escribe.
Se usa EmailViewModel para mantener el estado y proporcionar la lógica de validación de correo electrónico.
Si isError es verdadero, la IU proporciona un indicador visual de un estado de error de validación.
El componente mostrará "Formato de correo electrónico incorrecto" hasta que se ingrese un correo electrónico completo y correcto.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones seleccionadas de guías de inicio rápido que abarcan objetivos más amplios de desarrollo de Android:

Texto visible

El texto es una pieza central de cualquier IU. Descubre las diferentes formas en que puedes presentar texto en tu app para proporcionar una experiencia del usuario agradable.

Colección de guías de inicio rápido

Solicita la entrada del usuario

Aprende a implementar formas para que los usuarios interactúen con tu app ingresando texto y usando otros medios de entrada.