23 Validando el formulario en el curso de LARAVEL 10 - Sistema de control de asistencia

Duración: 13 min
Módulo: Formulario de Creación y Seguridad de Datos 🛡️ Lección 3 de 6
Anterior
22 Respondiendo comentarios en el curso de LARAVEL 10 - Sistema de control de asistencia
Siguiente
24 Request Store del formulario en el curso de LARAVEL 10 - Sistema de control de asistencia

Descripción

🎬 Lección 23: 🛡️ Validación del Formulario y Previsualización de Imagen

Enlace del Video: https://youtu.be/aKFxh2MlJt4

💡 Objetivo:

Aplicar validación de frontend (HTML5) a los campos obligatorios para mejorar la experiencia del usuario y desarrollar un script para previsualizar la fotografía antes de que se suba al servidor.

📌 Contenido Clave de la Lección:

  • ⚙️ Configuración del Formulario:
    • Se envuelve todo el contenido de la vista create.blade.php en una etiqueta <form>.
    • Se define el method="POST" y la action a la ruta /miembros para que el controlador pueda recibir la información [11:14].
    • Se añade el atributo enctype="multipart/form-data", esencial para el manejo y envío de archivos, como la fotografía [12:00].
  • ✅ Validación y Usabilidad (Frontend):
    • Campos Requeridos: Se añade el atributo required a los inputs obligatorios (Nombres, Correo, Teléfono, Fecha de Nacimiento) para forzar la validación básica del navegador antes del envío [01:45].
    • Tipos de Input Específicos: Se optimizan los inputs utilizando tipos de HTML5 más adecuados:
      • type="email" para el correo electrónico [02:59].
      • type="number" para el campo de teléfono [03:16].
      • type="date" para el selector de fecha de nacimiento [03:37].
    • Select de Género: Se reemplaza el input de texto por un <select> con opciones predefinidas ("Masculino" y "Femenino") para garantizar la integridad de los datos [09:29].
  • 🖼️ Funcionalidad de Previsualización de la Fotografía (Pre-Load):
    • Se implementa un pequeño bloque de código JavaScript que detecta el cambio en el input de tipo file [04:57].
    • Este script permite que, al seleccionar un archivo de imagen, este se cargue y previsualice instantáneamente dentro del contenedor asignado (usando un id="list"), antes de que el formulario sea enviado [07:47].

Con la validación del frontend completa y el formulario listo para enviar archivos, el enfoque pasa al backend. Por favor, comparte el enlace de la Lección 24, donde se espera la creación del método store.

$0.00
Iniciar sesión para inscribirse

Lecciones

Inicio Rápido y Configuración del Proyecto 🚀
Lección 1. 01 Presentación al curso de LARAVEL 10 - Sistema de control de asistencia 9 min
Lección 2. 02 Hola mundo en el curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Lección 3. 03 Autenticación LOGIN/REGISTRO en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 4. 04 Migración de tablas a la BASE de DATOS en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 5. 05 Como INSTALAR ADMINLTE dashboard en el curso de LARAVEL 10 Sistema de control de asistencia 11 min
Lección 6. 06 Como RESTRINGIR REGISTER en dashboard en el curso de LARAVEL 10 Sistema de control de asistencia 10 min
Lección 7. 07 Personalizar el PANEL DASHBOARD en el curso de LARAVEL 10 Sistema de control de asistencia 16 min
Lección 8. 08 PLANTILLAS BLADE en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 9. 09 Vistas con las plantillas de BLADE en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 10. 10 Respondiendo preguntas en el curso de LARAVEL 10 - Sistema de control de asistencia 9 min
Arquitectura MVC y Gestión de Modelos 🏗️
Lección 1. 11 Creación de tabla y migración en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 2. 12 Creación del MODELO MVC en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Lección 3. 13 Revertir migración con ROLLBACK en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Lección 4. 14 CONTROLADORES en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Sembrado de Datos y Visualización Básica 🗄️
Lección 1. 15 CRUD - Read lectura de datos en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Lección 2. 16 Correr SEEDER para sembrar DATOS en el curso de LARAVEL 10 - Sistema de control de asistencia 14 min
Lección 3. 17 Correr FACTORY para crear DATOS en el curso de LARAVEL 10 - Sistema de control de asistencia 11 min
Lección 4. 18 Cargar DATOS de la TABLA en la vista en el curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Tablas Dinámicas y Experiencia de Usuario 📊
Lección 1. 19 Utilizar DataTables en el curso de LARAVEL 10 - Sistema de control de asistencia 18 min
Lección 2. 20 Poner DATATABLES en español en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Formulario de Creación y Seguridad de Datos 🛡️
Lección 1. 21 FORMULARIO para registrar datos en el curso de LARAVEL 10 - Sistema de control de asistencia 14 min
Lección 2. 22 Respondiendo comentarios en el curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Lección 3. 23 Validando el formulario en el curso de LARAVEL 10 - Sistema de control de asistencia 13 min
Lección 4. 24 Request Store del formulario en el curso de LARAVEL 10 - Sistema de control de asistencia 12 min
Lección 5. 25 CRUD Create guardar datos en la tabla enel curso de LARAVEL 10 - Sistema de control de asistencia 10 min
Lección 6. 26 Validación de datos desde el Backend en el curso de LARAVEL 10 - Sistema de control de asistencia 8 min
Notificaciones y Mensajes Personalizados 🎉
Lección 1. 27 Mostrar los ERRORES en pantalla en el curso de LARAVEL 10 - Sistema de control de asistencia 11 min
Lección 2. 28 Cambiar el idioma de los mensajes en el curso de LARAVEL 10 - Sistema de control de asistencia 13 min
Lección 3. 29 Como instalar SWEETALERT2 sin morir en el intento de LARAVEL 10 -Sistema de control de asistencia 10 min
Consulta de Detalles y Gestión de Archivos 🖼️
Lección 1. 30 Función SHOW para mostrar datos de un registro con de LARAVEL 10-Sistema de control de asistencia 9 min
Lección 2. 31 Buscar registro de la tabla de la base de datos con LARAVEL 10-Sistema de control de asistencia 11 min
Lección 3. 32 Cargar datos de la tabla de la base de datos con LARAVEL 10-Sistema de control de asistencia 9 min
Lección 4. 33 Cargar fotografia del registro de la base de datos conLARAVEL 10-Sistema de control de asistencia 13 min
Actualización y Eliminación (Update & Delete) 🔄
Lección 1. 34 Función EDITAR datos con LARAVEL 10-Sistema de control de asistencia 10 min
Lección 2. 35 Función OLD para no perder los datos del formulario enLARAVEL 10-Sistema de control de asistencia 9 min
Lección 3. 36 Cargar datos en el formulario para UPDATE en LARAVEL 10-Sistema de control de asistencia 13 min
Lección 4. 37 Controller UPDATE en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 5. 38 Controller DELETE en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 6. 39 Usar FAKE para generar datos reales en curso de LARAVEL 10 Sistema de control de asistencia 11 min
Módulos Secundarios y Funcionalidad Clave 🧩
Lección 1. 40 Módulos ministerios en el curso de LARAVEL 10 Sistema de control de asistencia 49 min
Lección 2. 41 CRUD completo de los ministerios en el curso de LARAVEL 10 Sistema de control de asistencia 35 min
Lección 3. 42 Modificando el DASHBOARD en el curso de LARAVEL 10 Sistema de control de asistencia 22 min
Lección 4. 43 Módulo USUARIOS en el curso de LARAVEL 10 Sistema de control de asistencia 26 min
Lección 5. 44 CRUD completo de los USUARIOS en el curso de LARAVEL 10 Sistema de control de asistencia 52 min
Lección 6. 45 Relacionar TABLAS en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 7. 46 Generar CRUD completo de ASISTENCIAS en el curso de LARAVEL 10 Sistema de control de asistencia 14 min
Lección 8. 47 AJUSTES del CRUD ASISTENCIAS en el curso de LARAVEL 10 Sistema de control de asistencia 25 min
Reportes Profesionales, Roles y Despliegue Final 🛡️
Lección 1. 48 REPORTES con DOMPDF en el curso de LARAVEL 10 Sistema de control de asistencia 39 min
Lección 2. 49 REPORTE entre 2 FECHAS en el curso de LARAVEL 10 Sistema de control de asistencia 23 min
Lección 3. 50 ROLES Y PERMISOS en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 4. 51 SEEDER roles y permisos en el curso de LARAVEL 10 Sistema de control de asistencia 12 min
Lección 5. 52 Asignar PERMISOS a las RUTAS en el curso de LARAVEL 10 Sistema de control de asistencia 18 min
Lección 6. 53 NAVEGANDO CON LOS ROLES Y PERMISOS en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 7. 54 SEEDER USUARIOS por defecto en el curso de LARAVEL 10 Sistema de control de asistencia 13 min
Lección 8. 55 COMPARTIENDO el CÓDIGO FUENTE del curso de LARAVEL 10 Sistema de control de asistencia 15 min
Lección 9. 56 DESCARGAR e INSTALAR el PROYECTO del curso de LARAVEL 10 Sistema de control de asistencia 21 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso