🛡️ Validación de Entrada de Datos

🎥 Video Tutorial

Sigue este video para aprender paso a paso la validación de datos:

📚 Repaso del Capítulo Anterior

🎯 Objetivo de este Capítulo

Aprenderemos a validar la información ingresada por el usuario para evitar que envíe campos vacíos o datos incorrectos.

1️⃣ Paso 1: Crear Variable de Validación

Primero, crearemos una variable observable que guardará el estado de validación:

var isCorrect by rememberSaveable { mutableStateOf(false) }

2️⃣ Paso 2: Validar en onValueChange

Dentro de onValueChange validaremos si el usuario ha escrito algo usando el método isNullOrEmpty():

CreateTextField(
    value = value,
    onValueChange = {
        value = it
        // Validamos: ¿está vacío?
        isCorrect = value.isNullOrEmpty()
    },
    isError = isCorrect
)

3️⃣ Paso 3: Actualizar el TextField

Agregamos la propiedad isError al TextField para mostrar el error visualmente:

@Composable
fun CreateTextField(
    value: String,
    onValueChange: (String) -> Unit,
    isError: Boolean
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text("Ingrese su nombre") },
        modifier = Modifier.fillMaxWidth(),
        // Si isError es true, se pinta el borde de rojo
        isError = isError,
        singleLine = true
    )
}

4️⃣ Paso 4: Mostrar Mensaje de Error

Agregamos un texto condicional que se muestra solo cuando hay un error:

if (isCorrect) {
    Text(
        text = "⚠️ Debes ingresar un valor",
        color = Color.Red,
        fontSize = 14.sp,
        modifier = Modifier.padding(start = 16.dp, top = 4.dp)
    )
}

5️⃣ Paso 5: Validar al Enviar

También debemos validar cuando el usuario presiona el botón:

CreateButton {
    // Validamos antes de mostrar el mensaje
    isCorrect = value.isNullOrEmpty()
    
    if (!isCorrect) {
        // Si NO hay error, mostramos el saludo
        Toast.makeText(
            context,
            "¡Hola $value! 👋",
            Toast.LENGTH_SHORT
        ).show()
    }
}

📋 Código Completo

@Composable
fun Formulario(paddingValues: PaddingValues) {
    var value by rememberSaveable { mutableStateOf("") }
    var isCorrect by rememberSaveable { mutableStateOf(false) }
    val context = LocalContext.current

    Column(
        modifier = Modifier
            .padding(paddingValues)
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // Campo de texto con validación
        CreateTextField(
            value = value,
            onValueChange = {
                value = it
                isCorrect = value.isNullOrEmpty()
            },
            isError = isCorrect
        )

        // Mensaje de error
        if (isCorrect) {
            Text(
                "⚠️ Debes ingresar un valor",
                color = Color.Red
            )
        }

        Spacer(modifier = Modifier.height(16.dp))

        // Botón con validación
        CreateButton {
            isCorrect = value.isNullOrEmpty()
            if (!isCorrect) {
                Toast.makeText(
                    context,
                    "¡Hola $value!",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }
}