Validación de Formularios: Eventos y Técnicas Básicas para Campos Obligatorios y Formatos Correctos | Introducción a JavaScript

¿Por qué validar formularios? (10 minutos)

Explicación:

La validación de formularios asegura que los datos ingresados por el usuario sean correctos antes de enviarlos al servidor. Esto mejora la experiencia del usuario (evitando errores) y reduce la carga en el backend.

Validación en el cliente:

Usamos JavaScript para verificar datos en el navegador.
Ejemplos: Comprobar que un campo no esté vacío o que un email tenga un formato válido.
Beneficio: Respuesta inmediata sin esperar al servidor.

Validación básica incluye:

Campos vacíos: Asegurar que los campos requeridos tengan datos.
Formato de email: Verificar que incluya un "@" y un dominio (como ".com").

Conexión con Laravel:

En Laravel, la validación en el cliente (JavaScript) complementa la validación en el servidor (controladores), mejorando la usabilidad y seguridad de las vistas Blade.

Punto clave: La validación en el cliente es la primera línea de defensa para formularios, esencial para aplicaciones web profesionales.

Actividad rápida (2 minutos):

Piensa en un formulario que hayas usado (por ejemplo, registro en una web). Escribe en papel 1 cosa que podría validarse. Ejemplo:

Que el campo de contraseña no esté vacío.

Eventos de formulario (15 minutos)

Explicación:

Los eventos de formulario permiten detectar acciones del usuario, como enviar un formulario o escribir en un campo.

Eventos principales:

submit: Se activa al enviar el formulario (clic en <button type="submit"> o presionar Enter).

<form onsubmit="validarFormulario()">
    <input type="text">
    <button type="submit">Enviar</button>
</form>

input: Se activa al cambiar el valor de un campo (útil para validación en tiempo real).
```
<input oninput="verificarCampo()">
```

Prevenir envío por defecto:

El evento submit envía el formulario al servidor por defecto. Para validarlo primero, usamos event.preventDefault().

function validarFormulario(event) {
    event.preventDefault(); // Evita el envío
    console.log("Validando...");
}

Cómo conectar eventos:

Con atributos HTML: onsubmit="validar()".

Con JavaScript: Usando addEventListener (más moderno).

let formulario = document.getElementById("miFormulario");
formulario.addEventListener("submit", validarFormulario);

Ejemplo simple:

<form id="miFormulario">
    <input type="text" id="nombre">
    <button type="submit">Enviar</button>
</form>
<script>
    function validarFormulario(event) {
        event.preventDefault();
        let nombre = document.getElementById("nombre").value;
        console.log("Nombre ingresado: " + nombre);
    }
</script>

Punto clave: Los eventos de formulario son esenciales para capturar datos y validarlos antes de procesarlos en Laravel.

Actividad rápida (3 minutos):
Escribe en papel o consola cómo evitarías que un formulario se envíe usando event.preventDefault(). Solución sugerida:

function manejarEnvio(event) {
    event.preventDefault();
    console.log("Formulario detenido");
}

Validación básica (15 minutos)

Explicación:
La validación básica verifica:

Campos vacíos: Usar .value para comprobar si está vacío ("").
Formato de email: Verificar que contenga "@" y opcionalmente un dominio (usando métodos de strings o expresiones regulares simples).

Técnicas:

Campos vacíos:

let campo = document.getElementById("nombre").value;
if (campo === "") {
    alert("El campo no puede estar vacío");
}

Formato de email:

Método simple: Buscar "@" con includes().

let email = document.getElementById("email").value;
if (!email.includes("@")) {
    alert("El email debe contener un @");
}

Ejemplo práctico (como pide la lección):
Validar que un campo email tenga un "@":

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Validar Email</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
        }
        .error {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>Validar Email</h1>
    <form id="formEmail" onsubmit="validarEmail(event)">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Tu correo">
        <p id="mensajeError" class="error"></p>
        <button type="submit">Verificar</button>
    </form>
    <script>
        function validarEmail(event) {
            event.preventDefault();
            let email = document.getElementById("email").value;
            let mensajeError = document.getElementById("mensajeError");
            if (email === "") {
                mensajeError.textContent = "El campo email no puede estar vacío";
            } else if (!email.includes("@")) {
                mensajeError.textContent = "El email debe contener un @";
            } else {
                mensajeError.textContent = "";
                alert("Email válido: " + email);
            }
        }
    </script>
</body>
</html>

Cómo funciona:

<form onsubmit="validarEmail(event)">: Llama a la función al enviar.
event.preventDefault(): Evita el envío por defecto.
.value: Obtiene el texto del campo email.
if (email === ""): Verifica si está vacío.
!email.includes("@"): Comprueba si falta el "@".
textContent: Muestra mensajes de error o limpia el mensaje si es válido.

Cómo probarlo:

Crea un archivo validar_email.html en VS Code.
Copia el código y guárdalo.
Ábrelo en un navegador.
Prueba:
- Deja el campo vacío → Error: "El campo email no puede estar vacío".
- Escribe "test" → Error: "El email debe contener un @".
- Escribe "test@dominio.com" → Alerta: "Email válido".
Usa la consola (F12 > Console) para depurar si hay errores.
Alternativa: Pega en CodePen (pestaña HTML/CSS/JS) y prueba.

Resultado esperado:

Un formulario con un campo email.
Mensajes de error en rojo si el campo está vacío o no tiene "@".
Una alerta si el email es válido.

Punto clave: La validación básica mejora la usabilidad de formularios, una práctica común en Laravel para formularios dinámicos.

Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para mostrar un error si el email no tiene ".com". Solución sugerida:

else if (!email.includes("@") || !email.includes(".com")) {
    mensajeError.textContent = "El email debe contener un @ y .com";
}

Resumen y preparación para la tarea (20 minutos)

Resumen:

Validación: Verifica datos antes de enviarlos (campos vacíos, formato email).
Eventos de formulario: submit para validar al enviar, input para tiempo real.
event.preventDefault(): Detiene el envío para validar primero.
Ejemplo: Validamos un email comprobando el "@".
Estos conceptos son clave para formularios en Laravel, mejorando la experiencia del usuario.

Preparación para la tarea:
La tarea pide añadir validación al formulario de registro de la Lección 2 del Módulo 2 (4 campos: nombre, email, contraseña, edad).

Validar:
- Nombre y email no deben estar vacíos.
- Email debe contener "@".
Método:
- Usar submit con event.preventDefault().
- Mostrar errores con textContent o alert.
- Permitir envío solo si pasa la validación.

Estrategia sugerida:

Selecciona los campos con getElementById.
Verifica cada campo en una función conectada a onsubmit.
Muestra mensajes de error debajo de los campos o en alertas.

Tarea práctica: Añade validación al formulario del Módulo 2

Instrucciones:

Toma el formulario de la Lección 2 del Módulo 2 (registro.html) con 4 campos (nombre, email, contraseña, edad). Código base:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Formulario de Registro</title>
</head>
<body>
    <h1>Regístrate</h1>
    <form action="/registro" method="post">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Tu correo">
        <label for="contrasena">Contraseña:</label>
        <input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
        <label for="edad">Edad:</label>
        <input type="number" id="edad" name="edad" placeholder="Tu edad">
        <button type="submit">Registrarse</button>
    </form>
</body>
</html>

Añade validación con JavaScript para:
- Verificar que nombre y email no estén vacíos.
- Asegurar que email contenga un "@".
- Mostrar mensajes de error (con <p> o alert).
Usa el siguiente código como guía:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Formulario Validado</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
        }
        .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
        .campo {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h1>Regístrate</h1>
    <form id="registroForm" onsubmit="validarFormulario(event)">
        <div class="campo">
            <label for="nombre">Nombre:</label>
            <input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
            <p id="errorNombre" class="error"></p>
        </div>
        <div class="campo">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Tu correo">
            <p id="errorEmail" class="error"></p>
        </div>
        <div class="campo">
            <label for="contrasena">Contraseña:</label>
            <input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
        </div>
        <div class="campo">
            <label for="edad">Edad:</label>
            <input type="number" id="edad" name="edad" placeholder="Tu edad">
        </div>
        <button type="submit">Registrarse</button>
    </form>
    <script>
        function validarFormulario(event) {
            event.preventDefault();
            let nombre = document.getElementById("nombre").value;
            let email = document.getElementById("email").value;
            let errorNombre = document.getElementById("errorNombre");
            let errorEmail = document.getElementById("errorEmail");
            let esValido = true;

            // Limpiar errores previos
            errorNombre.textContent = "";
            errorEmail.textContent = "";

            // Validar nombre
            if (nombre === "") {
                errorNombre.textContent = "El nombre no puede estar vacío";
                esValido = false;
            }

            // Validar email
            if (email === "") {
                errorEmail.textContent = "El email no puede estar vacío";
                esValido = false;
            } else if (!email.includes("@")) {
                errorEmail.textContent = "El email debe contener un @";
                esValido = false;
            }

            // Si todo es válido, mostrar éxito
            if (esValido) {
                alert("Formulario válido. Nombre: " + nombre + ", Email: " + email);
            }
        }
    </script>
</body>
</html>

Prueba el archivo:
- Guarda como registro_validado.html.
- Ábrelo en un navegador.
- Prueba:
  - Enviar con nombre y email vacíos → Errores en rojo.
  - Enviar con email sin "@" → Error: "El email debe contener un @".
  - Enviar con datos válidos (por ejemplo, "Ana", "ana@correo.com") → Alerta de éxito.
- Usa la consola (F12 > Console) para depurar si no funciona.
- Alternativa: Pega en CodePen y prueba.

Ejemplo de solución esperada:

El código anterior es funcional. En el navegador:

Un formulario con 4 campos, estilizado con CSS básico.
Mensajes de error en rojo si el nombre o email están vacíos o si el email no tiene "@".
Una alerta si la validación pasa.

Tiempo estimado: 20-30 minutos (puedes hacerlo después de la lección).
Entregable: Archivo registro_validado.html con un formulario validado. Puedes compartir el código o describirlo para que lo revise.

Consejo: Prueba añadir estilos a los campos con error (por ejemplo, borde rojo) usando style.border para una mejora visual.

Validación de formularios

¿Por qué validar formularios? (10 minutos)

Explicación:

Conexión con Laravel:

Actividad rápida (2 minutos):

Eventos de formulario (15 minutos)

Explicación:

Validación básica (15 minutos)

Resumen y preparación para la tarea (20 minutos)

Tarea práctica: Añade validación al formulario del Módulo 2

Instrucciones:

Ejemplo de solución esperada:

Evaluación de Conocimientos: Validación de Formularios

1. ¿Cuál es el propósito principal de la validación de formularios en el cliente?

2. ¿Qué evento de formulario se activa al intentar enviar un formulario?

3. En el ejemplo de la lección, ¿qué se verificó en el campo email?

4. ¿Qué método evita que un formulario se envíe al servidor durante la validación?

5. En la tarea, ¿qué campos del formulario debían validarse como no vacíos?

6. ¿Qué propiedad de un elemento <input> devuelve su contenido?

7. En el ejemplo, ¿qué método de string se usó para verificar la presencia de un @ en el email?

8. En la tarea, ¿cómo se mostraban los mensajes de error para el usuario?

9. ¿Qué evento permite validar un campo mientras el usuario escribe?

10. En el ejemplo, ¿dónde se mostraban los mensajes de error si el email estaba vacío?

Resultados: