¿Te resulta más fácil leer con fondo crema, un tono de color, más contraste o un texto más grande? Elige tus colores y tu texto una sola vez, para todas las páginas.

Lección gratuita

Validar un formulario web

Después de esta lección: Puedo comprobar lo que escribe una persona en un formulario.

Lección de 45 min1 comandoLaboratorio de PostgreSQL y PostgREST: una base de datos y una API REST en el navegador

Qué es validar un formulario

Validar un formulario es comprobar lo que escribe una persona antes de aceptarlo. Así evitas datos rotos, como una edad de menos cinco años o un correo sin arroba.

Imagina el formulario para apuntarte a un torneo de tu instituto. Si acepta cualquier cosa, el listado final es un caos.

Al final de esta lección

Nota

Puedo comprobar lo que escribe una persona en un formulario.

Palabras clave

PalabraQué significaEjemplo
Formulariouna página con campos donde alguien escribe datos
Validarcomprobar que un dato cumple las reglas
Campo obligatorioun campo que no puede quedar vacío
Rangolos valores permitidos, de uno mínimo a uno máximo14 a 120
Formatola forma que debe tener un dato[email protected]

Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.

Cuatro comprobaciones sirven para casi todo

Primero, que el campo no esté vacío. Segundo, que sea del tipo correcto, por ejemplo un número. Tercero, que esté dentro del rango.

Cuarto, que tenga el formato esperado, como un correo con arroba. Cada campo usa una o varias de estas comprobaciones.

Ejemplo resuelto: reglas del torneo

CampoReglaValor buenoValor malo
NombreNo vacíoLucía(nada)
EdadNúmero de 14 a 12016-5
CorreoLleva una arroba y un punto después[email protected]lucia.correo.es
Código postalCinco cifras280132801

Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.

Comprueba un correo con la base

Comando
PGPASSWORD=shop psql -h db -U shop -c "select '[email protected]' ~ '^[^@ ]+@[^@ ]+[.][a-z]+$' as correo_valido"

Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.

El navegador ayuda y el servidor decide

El navegador puede comprobar el formulario antes de enviarlo. Eso es cómodo, porque avisa al momento.

Pero cualquiera puede saltarse el navegador y enviar datos directamente. Por eso el servidor repite siempre las comprobaciones. La del navegador es una ayuda, y la del servidor es la que vale.

Así pide el navegador las reglas

Código: bash
# Ejemplo de campos con reglas, escritos en HTML
<input name="edad" type="number" min="14" max="120" required>
<input name="correo" type="email" required>

Un error frecuente

Advertencia

Mucha gente cree que si el navegador ya comprueba el formulario, el servidor no lo necesita. Es falso. Quien escribe un programa puede enviar datos sin pasar por tu página, así que el servidor comprueba siempre.

Un buen aviso dice qué corregir

No basta con decir "datos incorrectos". Una buena validación devuelve todos los errores a la vez, uno por campo, para que la persona los arregle de una vez.

Piensa en la función como una lista de comprobaciones. Cada comprobación que falla añade un aviso a la lista.

Una validación con una lista de avisos

Código: python
def validar_edad(texto):
    avisos = []
    if not texto.isdigit():
        avisos.append("edad")
    elif int(texto) < 14 or int(texto) > 120:
        avisos.append("edad")
    return avisos


print(validar_edad("16"))
print(validar_edad("-5"))
print(validar_edad("abc"))
# Cambia 14 por 16 en la función y mira qué pasa con "15"

Para ir más lejos: una regla nueva

Añade una regla: el nombre no puede pasar de 30 letras. Piensa en qué aviso devolverías y en qué lugar de la función la escribirías.

Después prueba tu función con un nombre de 31 letras y con uno de 30.

Sobre este laboratorio y su código: Laboratorio de PostgreSQL y PostgREST: una base de datos y una API REST en el navegador

¿Enseñas a una clase? Asigna este módulo a tus alumnos con guía del profesor, tareas con corrección automática y un laboratorio para cada alumno.