43 CREACIÓN DE PROVEEDORES del Sistema de Ventas con (PHP y MySql) FullStack
Duración: 19 minDescripción
Lección 43: Creación de Proveedores (Vista Modal y Validación con jQuery/Ajax) 💻📝
Esta lección se enfoca en la implementación del formulario modal para registrar nuevos proveedores, mejorando la experiencia del usuario y aplicando validaciones de campos del lado del cliente utilizando JavaScript con jQuery/Ajax.
1. 🖼️ Diseño del Formulario Modal
Se adapta la vista modal para la creación de nuevos proveedores, optimizando la distribución de los campos:
- Identificador: El modal de registro se nombra modal-create [01:25].
- Tamaño del Modal: Se utiliza la clase modal-lg (Large) para aumentar el ancho del modal, permitiendo una mejor visualización de los campos [04:26].
- Diseño en Dos Columnas: Para evitar que el formulario sea demasiado largo, se utiliza la estructura de Grid System de Bootstrap (filas y columnas) para dividir los campos en dos columnas de 6 unidades (col-md-6), haciendo el formulario más compacto y fácil de usar [04:52].
- Campos Requeridos: Se implementan los campos necesarios, ajustando el tipo de input según el dato:
2. 📝 Validación de Campos (Lógica con jQuery)
Antes de enviar los datos al controlador mediante Ajax, se implementa una lógica de validación del lado del cliente para asegurar que los campos obligatorios se hayan llenado:
- Captura de Variables: Al hacer clic en el botón de registro, se capturan los valores de todos los inputs (identificados por su id) y se almacenan en variables de JavaScript/jQuery [09:04].
- Validación Anidada (if/else if): Se utiliza una estructura if anidada para verificar secuencialmente si los campos obligatorios están vacíos (== "") [11:04].
- Feedback Visual: Si un campo obligatorio está vacío, se ejecutan dos acciones para guiar al usuario [11:34]:
- Focus: Se dirige automáticamente el cursor (función .focus()) al campo que debe ser llenado.
- Mensaje de Error: Se muestra un mensaje de error (utilizando un label previamente oculto) en color rojo, indicando que el campo es requerido (.css('display', 'block')).
Ejemplo de Flujo de Validación: Si el usuario intenta guardar sin el nombre del proveedor, el sistema le pedirá el nombre. Una vez llenado, si intenta guardar de nuevo y falta el celular, le pedirá el celular, y así sucesivamente [13:35].
3. ➡️ Siguiente Paso
Con el formulario de registro y la validación listos, la próxima lección se centrará en el desarrollo del controlador de creación (create.php) para procesar estos datos mediante Ajax e insertar el nuevo proveedor en la base de datos [18:44].
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! ❤️