Saltar al contenido principal

Validación de formularios

Durante la creación de formularios web, se vuelve necesario realizar una verificación donde se compruebe que los todos los campos se envían correctamente al servidor.

Para ver cómo se realiza, consideremos el siguiente formulario:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formulario de registro</title>
  </head>
  <body>
    <h1>Formulario de registro</h1>

    <form action="registro.php" method="get">
      <p>
        <label for="nombre">Nombre</label>
        <input type="text" id="nombre" name="nombre" maxlength="50" />
      </p>

      <p>
        <label for="ciclo">Ciclo formativo</label>
        <input type="radio" id="dam" name="ciclo" value="dam" />
        <label for="dam">DAM</label>
        <input type="radio" id="daw" name="ciclo" value="daw" />
        <label for="daw">DAW</label>
        <input type="radio" id="asir" name="ciclo" value="asir" />
        <label for="asir">ASIR</label>
      </p>

      <p>
        <input type="checkbox" id="info" name="info" checked="checked" />
        <label for="info">Deseo recibir información sobre novedades.</label>
      </p>

      <p>
        <input type="submit" value="Enviar" />
      </p>
    </form>
  </body>
</html>
Probar en el navegador

Documento HTML

Para realizar la comprobación, vamos a usar una funcionalidad que nos proporciona las herramientas de desarrollador (developer tools) del navegador. En este apartado vamos a ver cómo se realiza en Google Chrome, Firefox o Microsoft Edge.

A continuación, se describen los pasos.

Paso 1. Abrir las herramientas de desarrollador​

Una vez abierto el HTML del formulario:

  • Botón derecho sobre cualquier parte de la página web
  • Pulsamos en Inspeccionar (Inspect).

Esta acción abrirá un menú como el siguiente:

De forma alternativa, se pueden abrir las herramientas de desarrollador de la siguiente manera:

Paso 2. Pestaña Red​

A continuación, clicamos en la opción Red (Network), lo que abre un panel como el siguiente:

Ese panel muestra todas las peticiones HTTP que intercambia el navegador con el servidor. Cada petición HTTP se corresponde con una fila dentro de ese panel.

Paso 3. Enviar formulario​

Una vez tenemos ese panel abierto, cubrimos los datos del formulario y le damos al botón de Enviar.

Al clicar en el botón Enviar, el formulario va a enviar los datos al servidor. El destino de los datos es el indicado en el atributo action de <form>. En este ejemplo, registro.php. Esto generará una nueva entrada en la lista de eventos del panel Network (aunque puede no ser la única).

En la imagen anterior se resalta la petición correspondiente con el envío de datos del formulario. Vemos que empieza por registro.php, que es la ruta indicada en el atributo action de <form>.

Paso 4. Accedemos a los detalles de la petición​

Pulsamos sobre la fila, lo que permite abrir un panel donde aparece toda la información relacionada con la petición HTTP. Este panel tiene el siguiente aspecto:

De las pestañas que ahí aparecen, para esta explicación nos interesan dos:

  • Headers (encabezados): contiene información relacionada con la cabecera del mensaje. En la captura anterior podemos ver el campo Request Method indica que se ha enviado la petición mediante el método GET. Si se hubiera usado el método POST en ese campo aparecería POST.
  • Payload (carga útil): contiene la información enviada por el formulario al servidor.

Paso 5. Pestaña Payload​

Si pulsamos en Payload, podemos ver qué datos se han enviado. Al ser un formulario enviado mediante el método GET, podemos también visualizar los datos en la URL.

En la imagen anterior se puede visualizar como se han enviado los campos nombre, ciclo e info.

Cuando se cubre el formulario y se pulsa en el botón de Enviar, se genera un fichero formado por una estructura de datos clave-valor, donde:

  • La clave es el valor del atributo name de cada elemento
  • El valor es el texto introducido en los campos input o el valor del atributo del campo value de cada elemento.

De esta forma, podemos ver que al enviar el formulario:

  • Para el campo nombre el valor es el texto introducido por el usuario en el input.
  • Para el campo ciclo el valor es el asignado al atributo value del radio button seleccionado.

Si a la hora de enviar el formulario alguno de los campos no aparece en esa pestaña Payload, pueden ocurrir dos situaciones:

  • No se ha escrito un atributo name en la etiqueta correspondiente.
  • No se ha seleccionado el checkbox o radio button correspondiente.

Además, si el valor que aparece en el campo radio al enviar el formulario es el valor on significa que no se ha escrito el atributo value.

Con este ejemplo se puede observar la importancia de los campos name y value dentro de un formulario.