Validar formulario sin JavaScript

por

En este artículo vamos a explicar cómo validar un formulario sin JavaScript, con las herramientas que nos proporcionan HTML5 y CSS. Cuando mostramos un formulario en nuestra página web normalmente queremos que los datos introducidos sean correctos y del tipo esperado por diversos motivos:

  • Porque nuestras aplicaciones no funcionarán correctamente si los datos tienen formato incorrecto o se omiten.
  • Porque queremos proteger nuestra web de los usuarios malintencionados que hacen mal uso de formularios desprotegidos.
  • Porque los datos del formulario posteriormente se procesaran en el servidor y queremos evitar ataques o errores inesperados.
  • Un largo etc.

Estas y otras razones nos obligan a validar los datos del formulario antes de enviarlo al servidor y asegurarnos que esten en el formato correcto.

La validación de formulario que vamos a tratar en este artículo es la del lado del cliente y consiste en una verificación inicial que además contribuye a una buena experiencia de usuario. Detectar datos incorrectos en el lado del cliente, permite al usuario solucionarlo de inmediato y ayuda a garantizar que los datos enviados coincidan con los requisitos establecidos en los distintos campos del formulario.

Sin embargo, la validación del lado del cliente no debe considerarse una medida de seguridad exhaustiva. Siempre se deben realizar controles de seguridad de cualquier dato enviado con un formulario tanto en el lado del cliente como en el lado del servidor. Esto es debido a que validar un formulario con o sin JavaScript del lado del cliente es muy fácil de eludir y los usuarios malintencionados pueden enviar fácilmente datos incorrectos al servidor.

Validación de formulario incorporada

Una de las características más importantes del HTML5 es la capacidad de validar la mayoría de los datos del formulario sin depender de JavaScript. Cuando se ingresan datos el navegador verifica inmediatamente si estan en el formato correcto. Si la información tiene el formato correcto, permite que los datos se envíen al servidor. Si no tiene el formato correcto, muestra un mensaje de error explicando lo que debe corregirse.

Esto se hace mediante el uso de atributos de validación en los elementos del formulario, algunos de los cuales son:

  • required: Especifica si es obligatorio rellenar un campo del formulario.
  • minlength y maxlength: Especifica la longitud mínima y máxima de los tipos de datos de texto.
  • min y max: Especifica los valores mínimo y máximo de los tipos de datos numéricos.
  • type: Especifica un tipo de dato esperado: número, email, texto, archivo, etc.
  • pattern: Especifica una expresión regular que define un patrón para los datos de ese campo. En el artículo Expresiones regulares explico cómo se escriben.

Si los datos ingresados ​​en un campo de formulario siguen todas las reglas especificadas por sus atributos, entonces el campo se considera válido. En caso contrario, el campo se considera inválido. Esto nos permite utilizar pseudoclases CSS y aplicar estilos visuales a los campos del formulario.

  • Cuando un campo de formulario es válido, la pseudoclase :valid es cierta, lo que permite aplicar un estilo específico a elementos válidos.
  • Cuando un campo de formulario no es válido, la pseudoclase :invalid es cierta, lo que permite aplicar un estilo específico a elementos inválidos.
  • También hay otras pseudoclases como :out-of-range, :in-range que permitiría aplicar estilos específicos a elementos concretos.

Estos elementos CSS son visualmente importantes para mostrar al usuario de forma inmediata los errores en el formulario. Si se si intenta enviar el formulario con datos incorrectos el navegador lo bloqueará y mostrará un mensaje de error.

Ejemplo de validar un formulario

Vamos a ver un ejemplo completo de cómo validar un formulario sin JavaScript, utilizando las herramientas que nos proporcionan HTML5 y CSS.

<!DOCTYPE html>
<html>
<head>
  <title>Validar formularios</title>  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
  * {
    box-sizing: border-box;
  }
  form {
    padding: 1em;
    max-width: 320px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eee;
  }
  form > label {
    display: block;
    padding-bottom: 0.4em;
  }
  input[type="tel"],
  input[type="url"],
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  fieldset {
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid #333;
    box-sizing: border-box;
  }
  input[type="submit"] {
    float: right;
    padding: 0.4em 0.6em;
  }
  input:invalid,
  textarea:invalid {
    box-shadow: 0 0 5px 1px red;
  }
  input:required,
  textarea:required {
    box-shadow: 0 0 5px 1px orange;
  }
  input:valid,
  textarea:valid {
    box-shadow: 0 0 5px 1px green
  }
  input[type="submit"]:valid {
    box-shadow: none;
  }
  input:focus,
  textarea:focus {
    box-shadow: none;
  }  
</style>
</head>

<body>
  <h1>Validar formularios</h1>
  
  <form>
    <p>Ejemplo de validación de formularios con HTML5 y CSS sin utilizar JavaScript</p>

    <label>(*) Introduce tu nombre:</label>
    <input type="text" name="nombre" required />

    <label>(*) Introduce tus apellidos:</label>
    <input type="text" name="apellidos" required/>

    <fieldset>
      <legend>(*) Tienes carnet de conducir?</legend>
      <label>Yes <input type="radio" name="carnet" value="si" required /></label>
      <label>No <input type="radio" name="carnet" value="no" required /></label>
    </fieldset>

    <label>Introduce tu edad:</label>
    <input type="number" min="18" max="120" step="1" name="edad" />

    <label>Introduce tu email:</label>
    <input type="email" pattern="email" />

    <label>(*) Introduce tu teléfono:</label>
    <input type="text" name="telf" placeholder="+34-123-45-67-89" pattern="\+[0-9]{2}-[0-9]{3}-[0-9]{2}-[0-9]{2}-[0-9]{2}" required>

    <label>Introduce tu web:</label>
    <input type="url" name="url" />

    <label>(*) Escribe un texto corto:</label>
    <textarea name="msg" maxlength="140" rows="5" required></textarea>
    <p>(*) Campos obligatorios</p>

    <input type="submit" value="Enviar" />
  </form>
</body>
</html>

Este código nos mostrará un formulario donde aparecerán los bordes de los campos del formulario resaltados en naranja, verde o rojo dependiendo del los atributos y valores introducidos, como en la siguiente imagen:

Validar formularios sin JavaScript

Los campos con el atributo required aparecen resaltados por la pseudoclase :required, mientras que el resto, al no ser obligatorios y estar vacíos, de momento se consideran válidos y aparecen resaltados en verde. Al introducir valores, observamos que los colores de cada campo van cambiando de color dependiendo si los datos introducidos se consideran correctos o incorrectos, al aplicarse las pseudoclases CSS.

Ahora ya sabes cómo validar formularios sin JavaScript y hacerlos más atractivos, mejorando la experiencia de los usuarios.

Espero que este artículo sea de vuestro interés!

Deja un comentario