43 CREACIÓN DE PROVEEDORES del Sistema de Ventas con (PHP y MySql) FullStack

Duración: 19 min
Módulo: 🚚 Módulo de Proveedores y Configuración Lección 3 de 8

Descripció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:
    • nombre_proveedor (Texto)
    • celular (Numérico, Requerido) [16:58]
    • telefono (Numérico, No Requerido) [14:38]
    • empresa (Texto, Requerido)
    • email (Tipo email, No Requerido)
    • direccion (Se usa un textarea para mayor espacio, Requerido) [17:20]

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]:
    1. Focus: Se dirige automáticamente el cursor (función .focus()) al campo que debe ser llenado.
    2. 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].