76 – VALIDACIÓN DE DATOS DEL FORMULARIO PARA EL TICKET en el sistema con BD (👨💻PHP y MYSQL💻)
Duración: 14 minDescripción
🎓 Lección 76: Validación de Datos del Formulario del Ticket (jQuery & PHP)
Esta lección se enfoca en asegurar la calidad de los datos antes de que sean enviados a la base de datos. Se implementan validaciones tanto visuales (en el front-end) como lógicas (en el back-end con jQuery) para garantizar que el operario del sistema ingrese toda la información requerida en el formulario del ticket.
🎯 Objetivo Principal: Prevenir Registros Vacíos
El objetivo es impedir que el botón "Imprimir Ticket" ejecute la acción de registro si hay campos esenciales vacíos, evitando así la inserción de "información basura" en la tabla tickets [05:40].
| Icono | Enfoque de Validación | Descripción |
|---|---|---|
| 🚨 | Validación Visual (Front-end) | Se añaden asteriscos rojos a los labels de los campos obligatorios (Placa, Nombre del Cliente, NIT/CI) para indicar al usuario que son requeridos [02:31]. |
| 🔒 | Validación Lógica (Back-end con jQuery) | Se estructura el código jQuery con sentencias if/else anidadas para verificar que los campos críticos no estén vacíos antes de la llamada al controlador. |
Exportar a Hojas de cálculo
🛠️ Mecanismo de Validación con jQuery
La lógica se implementa en el script asociado al botón de registro y sigue una secuencia de verificación estricta:
- Verificación de Placa: Si la variable placa está vacía, se muestra una alerta (alert) y el foco se dirige automáticamente al campo Placa.
- Verificación de Nombre: Si la placa existe pero el nombre está vacío (lo que ocurre cuando el cliente es nuevo y no ha llenado sus datos), se solicita llenar el campo Nombre del Cliente.
- Verificación de NIT/CI: Si el nombre ya está lleno, se verifica que el campo nit_ci contenga datos.
- Aprobación Final: Solo si todas las condiciones se cumplen (else final), el sistema da la luz verde para proceder a la siguiente etapa: el envío de datos al controlador (Listo para el controlador) [13:12].
💡 Solución a Errores de Mapeo
Durante la implementación, se corrige un error crucial: los inputs de Nombre y NIT/CI se generan dinámicamente desde el controlador de clientes y originalmente no incluían el identificador (ID_map).
- Problema: Esto causaba que el script jQuery no pudiera leer sus valores de manera consistente [10:27].
- Solución: Se modifica el código para enviar la variable ID_map desde la vista principal al controlador de clientes, asegurando que los inputs de nombre y NIT/CI generados dinámicamente ahora incluyan el sufijo ID_map para una correcta identificación y lectura [11:43].
Al finalizar, el formulario es totalmente funcional y seguro, solo permitiendo el avance una vez que los campos obligatorios han sido llenados.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️