El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Validación de Formularios con WTForms

Siguiente ►
►

Introducción

WTForms es una biblioteca de Python que facilita la creación y validación de formularios web. En este módulo, aprenderás cómo integrar WTForms en tu aplicación Flask para manejar la validación de formularios de manera eficiente y segura.

Contenido

  1. Instalación de WTForms
  2. Creación de un Formulario Básico
  3. Validación de Campos
  4. Renderización de Formularios en Plantillas
  5. Manejo de Errores de Validación
  6. Ejercicio Práctico
  7. Conclusión

Instalación de WTForms

Para comenzar a usar WTForms, primero necesitas instalar la biblioteca. Puedes hacerlo utilizando pip:

pip install flask-wtf

Creación de un Formulario Básico

Primero, vamos a crear un formulario básico utilizando WTForms. Supongamos que queremos crear un formulario de registro de usuario con campos para el nombre de usuario, correo electrónico y contraseña.

Paso 1: Configuración de Flask-WTF

En tu archivo principal de Flask (app.py), configura Flask-WTF:

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, Length

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'

# Resto del código de la aplicación

Paso 2: Definición del Formulario

Crea una clase para tu formulario en un archivo separado o en el mismo archivo app.py:

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Sign Up')

Paso 3: Renderización del Formulario en una Plantilla

Crea una plantilla HTML para renderizar el formulario. Por ejemplo, en templates/register.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Paso 4: Manejo del Formulario en la Vista

En tu archivo app.py, crea una ruta para manejar el formulario:

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        # Aquí puedes manejar el registro del usuario
        username = form.username.data
        email = form.email.data
        password = form.password.data
        return f'User {username} registered with email {email}!'
    return render_template('register.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

Validación de Campos

WTForms proporciona una variedad de validadores que puedes usar para asegurarte de que los datos del formulario sean correctos. Aquí hay algunos validadores comunes:

  • DataRequired: Asegura que el campo no esté vacío.
  • Email: Verifica que el campo contenga una dirección de correo electrónico válida.
  • Length: Verifica que el campo tenga una longitud dentro de un rango específico.

Puedes combinar estos validadores en los campos de tu formulario como se muestra en el ejemplo anterior.

Renderización de Formularios en Plantillas

La renderización de formularios en plantillas se realiza utilizando las etiquetas de Jinja2. Aquí hay un ejemplo de cómo renderizar un campo de formulario con sus errores:

<p>
    {{ form.username.label }}<br>
    {{ form.username(size=32) }}<br>
    {% for error in form.username.errors %}
        <span style="color: red;">[{{ error }}]</span>
    {% endfor %}
</p>

Manejo de Errores de Validación

Cuando un formulario no pasa la validación, los errores se almacenan en el atributo errors del formulario. Puedes iterar sobre estos errores en tu plantilla para mostrarlos al usuario.

Ejercicio Práctico

Ejercicio

Crea un formulario de inicio de sesión con los siguientes campos:

  • email: Campo de correo electrónico con validación de dirección de correo.
  • password: Campo de contraseña con una longitud mínima de 6 caracteres.
  • submit: Botón de envío.

Solución

  1. Define el formulario en app.py:
class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Login')
  1. Crea una plantilla para el formulario en templates/login.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>
  1. Maneja el formulario en la vista:
@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        email = form.email.data
        password = form.password.data
        return f'Logged in with email {email}!'
    return render_template('login.html', form=form)

Conclusión

En este módulo, aprendiste cómo usar WTForms para crear y validar formularios en Flask. Cubrimos la instalación de WTForms, la creación de formularios básicos, la validación de campos, la renderización de formularios en plantillas y el manejo de errores de validación. Con estos conocimientos, estarás mejor preparado para manejar la entrada de usuario en tus aplicaciones Flask de manera segura y eficiente.

En el próximo módulo, exploraremos cómo manejar la carga de archivos en Flask. ¡Sigue adelante!

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo Web con Flask

Módulo 1: Introducción a Flask

Módulo 2: Conceptos Básicos de Flask

Módulo 3: Formularios y Entrada de Usuario

Módulo 4: Integración de Bases de Datos

Módulo 5: Autenticación de Usuarios

Módulo 6: Conceptos Avanzados de Flask

Módulo 7: APIs RESTful con Flask

Módulo 8: Despliegue y Producción

Módulo 9: Pruebas y Mejores Prácticas

Módulo 10: Extensiones y Ecosistema de Flask

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados