35 REQUIRED validación en el formulario web FRONTEND (LARAVELyMYSQL)FULLSTACK
Duración: 7 minDescripción
🔴 Lección 35: Validación REQUIRED en el Formulario Web (Frontend)
Esta lección avanzada se enfoca en aplicar una capa de validación inicial en el lado del Frontend (HTML/Blade) para guiar al usuario a llenar los campos obligatorios, y simultáneamente, subraya por qué esta medida no es suficiente y requiere una validación en el Backend para garantizar la seguridad.
1. 📢 Indicadores Visuales de Campos Requeridos [00:20]
Para mejorar la Experiencia de Usuario (UX), se identifica visualmente qué campos son obligatorios:
- Uso del Asterisco: Se añade un asterisco (*) junto a la etiqueta (<label>) de los campos que deben llenarse [01:01].
Estilización: El asterisco se envuelve en una etiqueta <span> o <b> y se le aplica un color rojo para que sea fácilmente identificable por el usuario [01:36].
HTML
<label>Título de la película <b style="color: red;">*</b></label>
2. 📝 Implementación del Atributo required [01:57]
Se utiliza el atributo estándar de HTML5 para una validación inmediata por parte del navegador:
- Atributo required: Se añade la propiedad required a los inputs y textareas que deben ser llenados obligatoriamente. [02:02]
- Ejemplos de campos obligatorios: Título, Categoría, Duración, Descripción, Portada, y al menos el Servidor 1 (Link 1).
- Funcionamiento: Si un campo con el atributo required se deja vacío, el navegador bloqueará el envío del formulario y mostrará un mensaje de advertencia pidiendo que se complete el campo [04:17].
3. ⚠️ Limitaciones de la Validación Frontend [04:35]
El instructor enfatiza que el atributo required no ofrece seguridad real y solo es una ayuda para la UX:
- Vulnerabilidad: Un usuario con conocimientos básicos puede eliminar fácilmente el atributo required inspeccionando el código HTML del navegador [05:10].
- Riesgo: Una vez eliminado el atributo, el formulario puede enviarse con campos vacíos, resultando en datos inválidos o nulos en la base de datos [05:35].
- Conclusión: La seguridad de los datos debe residir en el Backend (lado del servidor), ya que el código PHP de Laravel no puede ser visualizado ni modificado por el usuario, a diferencia del HTML [06:15].
4. 🔜 Próximo Paso: Validación Backend [06:35]
La siguiente lección se enfocará en implementar la validación estricta en el método store() del controlador de Laravel para asegurar que los campos requeridos se verifiquen en el lado del servidor, haciendo que la validación sea inmune a la manipulación del frontend.
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! ❤️
