Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elmerginez/form-validation
Form validation: Backend -> Python + Flask, Frontend -> HTML5 + TailwindCSS + JavaScript
https://github.com/elmerginez/form-validation
flask python
Last synced: 8 days ago
JSON representation
Form validation: Backend -> Python + Flask, Frontend -> HTML5 + TailwindCSS + JavaScript
- Host: GitHub
- URL: https://github.com/elmerginez/form-validation
- Owner: elmerginez
- Created: 2024-09-09T20:16:43.000Z (24 days ago)
- Default Branch: main
- Last Pushed: 2024-09-13T22:16:49.000Z (20 days ago)
- Last Synced: 2024-09-21T12:04:38.443Z (13 days ago)
- Topics: flask, python
- Language: HTML
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Resumen del Proyecto
Este proyecto es una aplicación web simple construida con Flask para procesar un formulario de contacto. El formulario captura información del usuario como nombre, apellido, correo electrónico, teléfono y mensaje.
## Tecnologías Utilizadas
- **HTML5** para la estructura del formulario.
- **Flask** para manejar las rutas y el procesamiento del formulario.
- **JavaScript** para validaciones en el frontend.
- **Tailwind CSS** para los estilos y la disposición del formulario.
- **Regular Expressions (Regex)** para validar campos como el correo electrónico y el teléfono.
## Requisitos Previos
Asegúrate de tener instalado:
- Python 3.x
- Flask (`pip install flask`)
## Instalación
1. Clona este repositorio:
```
git clone https://github.com/elmerginez/form-validation.git
```
2. Navega al directorio del proyecto:
```
cd form-validation
```
3. Crea un entorno virtual:
- En Windows:
```
python -m venv .venv
.venv\Scripts\activate
```
- En Linux:
```
python3 -m venv .venv
source .venv/bin/activate
```
4. Instala las dependencias necesarias:
```
pip install -r requirements.txt
```
5. Ejecuta la aplicación:
```
flask --app App run
```
6. Abre tu navegador y ve a http://localhost:5000 para ver el formulario.
## Estructura del Proyecto
- index.html: El archivo HTML principal que contiene el formulario de contacto.
- App.py: Archivo Python que utiliza Flask para procesar los datos del formulario.
- Tailwind CSS: Se utiliza para estilizar el formulario de manera moderna y responsiva.
## Validaciones del Formulario
- Frontend
Nombre y apellido: Solo permiten letras y espacios.
Correo electrónico: Valida que el correo siga un formato estándar (ejemplo: [email protected]).
Teléfono: Debe tener entre 9 y 12 dígitos.
Mensaje: Campo requerido.
- Backend
El nombre y el apellido deben contener solo letras.
El correo electrónico debe seguir un formato válido.
El número de teléfono debe contener solo dígitos y tener entre 9 y 12 caracteres.
El mensaje no puede estar vacío.
- Uso
Una vez que el usuario completa y envía el formulario, los datos se validan en el frontend. Si todo es correcto, el formulario se envía al servidor donde Flask realiza una segunda validación. Si todos los datos son válidos, se devuelve un mensaje indicando que el formulario ha sido procesado correctamente.
## Mejoras Futuras
Añadir un sistema de envío de correos electrónicos para notificar cuando se reciba un mensaje a través del formulario.
Implementar una base de datos para almacenar los mensajes recibidos.
## Licencia
Este proyecto está bajo la licencia MIT.