Verificación de formularios. DAWEB. Rafael Menéndez-Barzanallana Asensio. Universidad de Murcia (DIS)

DAWeb. Verificación de formularios

Validación en HTML 5

La validación de los campos de un formulario es una tarea de programación necesaria, aunque muchas veces es un proceso molesto. Para ejecutar la validación por parte del cliente es habitual recurrir a scripts, la mayoría de las veces en lenguaje JavaScript o emplear alguna librería para verificar que las entradas son del tipo correcto y que estén completas con datos, antes de que el formulario sea enviado. En HTML5 los nuevos atributos de las entradas como required y pattern usados en combinación con selectores de CSS, facilitan la programación y mejora de la interfaz del usuario.

Validación: atributo required

Si el atributo required está presente, entonces el campo debe contener necesariamente un valor al ser enviado. Por ejemplo:

<input type="email" id="email_addr" name="direccion-correo" required />

Validación: atributo pattern

El atributo pattern especifica una expresión regular usada para validar los campos de entrada. Por ejemplo, si se supone que la entrada ha de tener el siguiente formato: 3 letras en mayúsculas seguidas de 4 números. El uso de required y pattern asegura que la entrada debe ser rellenada siguiendo la expresión regular. Al situarse el usuario sobre la entrada, el mensaje en el atributo title se muestra.

<input type="text" id="referencia" name="referencia" required pattern="[A-Z]{3}[0-9]{4}"
title="El formato debe coincidir con 3 letras mayúsculas y 4 números."/>

Utilizando el ejemplo anterior se puede hacer que la entrada aparezca en color rojo si el valor ingresado no cumple con la expresión regular. Para hacerlo hay que combinar CSS:

invalid {
border: 2px solid #ff0000;
}

Validación: atributo formnovalidate

El atributo formnovalidate puede ser aplicado en input y button. Si está presente, la validación queda sin efecto. En el siguiente ejemplo tenemos dos botones, uno donde se realiza la validación y otro en el que no.


<input type="text" id="referencia" name="referencia" required pattern="[A-Z]{3}[0-9]{4}"
title="El número de referencia consta de 3 letras mayúsculas y 4 dígitos."/>

<input type="submit" formnovalidate value="Save">

<input type="submit" value="Submit">

Ejemplo de formulario

El siguiente código muestra el ejemplo de un formulario de datos, que son habituales en una compra a través de internet. El estilo del formulario se da en código CSS, incorporado en el código HTML5.

<style type="text/css">
form#pago {
margin:auto;
background: Green;
color: white;
font-size: 12px;
padding: 30px;
width: 350px;
border:solid 10px LightSteelBlue;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

form#pago fieldset {
border: none;
}

form#pago input{
font-size:12px;
background: yellow;
border:solid 1px Green;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
float: right;
margin-right: 15px;
width: 200px;
}

form#pago ol li {
line-height: 25px;
list-style: none;
}

form#pago [required]{
border:solid 1px red;
}

input:required {
outline: 1px solid red;
}
</style>
</head>

<body>

<form id="pago">
<fieldset>
<legend>Datos del comprador</legend>
<ol>
<li>
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text" placeholder="Escribe tu nombre completo" required autofocus>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ejemplo@um.es" required>
</li>
<li>
<label for="telefono">Teléfono</label>
<input id="telefono" name="telefono" type="tel" placeholder="Ej. +34668899999" required>
</li>
<li>
<label for="pais">País</label>
<input id="pais" name="pais" type="text" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Datos de tarjeta de crédito o débito</legend>
<ol>
<li>
<label for="numtarjeta">Número</label>
<input id="numtarjeta" name="numtarjeta" type="number" placeholder="Ej. 5555-4444-3333-2222" required>
</li>
<li>
<label for="nomtarjeta">Nombre</label>
<input id="nomtarjeta" name="nomtarjeta" type="text" placeholder="Nombre que figura en la tarjeta" required>
</li>
</ol>
</fieldset>
-------------------------------------------------
<fieldset>
<button type="submit">Confirmar pedido</button>
</fieldset>
</form>

Muestra del formulario:

Captura formulario comprador

Validación de formularios con JavaScript

En este apartado se va a describir como validar un formulario con un script en JavaScript. Esto significa que se fijarán unas condiciones para cuando el usuario rellene los diversos campos del formulario. Si las condiciones son las esperadas, el formulario podrá enviarse, de lo contrario, el envío será cancelado.

Seguidamente se muestra el código del formulario en HTML5:

<form name='formulario-js' onsubmit='return validar()'>
<ul>
<label for='nombre'>Nombre*</label>
<imput type='text' id='nombre' name='nombre' />
</li>
<li>
<label for='direccion'>Dirección*</label>
<imput type='text' id='direccion' name='direccion'/>
</li>
<li>
<label for='edad'>Edad</label>
<imput type='text' id='edad' name='edad' />
</li>
<li>
<label for='email'>E-mail</label>
<imput type='text' id='email' name='email' />
</li>
<li>
<label for='estudios'>Estudios</label>
<select id='estudios' name='estudios'>
<option value=''>Seleccione</option>
<option>Ningunos</option>
<option>Primarios</option>
<option>Bachiller</option>
<option>Grado</option>
<option>Master</option>
</select>
</li>
<li>
<label>
<input type='checkbox' value='SI' id='acepto'/>
He leído y acepto las condiciones;
</label>
</li>
</ul>
<button>Dar de alta</button>
</form>

A continuación con CSS se proporciona estilo al formulario:

<style>
form{
        width:295px;
    }

    ul{
        list-style:none;
    }

    label{
        width:200px;
        display:block;
        margin:10px;
        float:left;
    }
</style>

El manejador de eventos onsubmit de la etiqueta <form>, desde el que se hace una llamada a la función validar(). Esta función es la que se muestra seguidamente y tiene como objetivo comprobar que el usuario ha introducido en los campos lo que consideramos adecuado. Es muy difícil impedir que un usuario nos engañe si quiere, pero podemos delimitar bastante la variedad de cosas válidas que puede escribir en los campos de texto del formulario.

Otro punto importante antes de pasar a la creación de la función de validación, es que debemos fijarnos que, en su llamada desde el form, añadimos la palabra reservada de JavaScript return. Esto lo hacemos porque validar() va al devolver false (falso) en caso de que falle alguno de los campos, y de este modo, al devolver el valor falso, se detiene el envío del formulario. Este retorno de valores se consigue creando una variable booleana (que podrá devolver verdadero o falso) a modo de indicador. En el ejemplo, esta variable se denomina todo_correcto. Al comenzar el script, a la variable todo_correcto se le asigna el valor true (verdadero). Imaginemos, que analizaremos campo a campo las condiciones que hemos puesto al usuario para que rellene el formulario correctamente. Si la condición no se cumple, la variable todo_correcto tomará el valor false, entonces, podemos imaginar que levantamos el indicador, puesto que se ha producido un error. La función termina retornando el valor de todo_correcto. Si al final ese valor es true, el envío del formulario será posible, si es false, el envío se detendrá. Cabe recordar que para que la función retorne false, bastará con que uno o más de los campos retorne este valor. Para que sea true, todos los campos deben estar validados. A continuación se muestra el código para la función validar():

<script type='text/javascript'>

function validar(){

/*creo una variable de tipo booleano que en principio tendrá un valor true(verdadero),
y que se convertirá en false(falso) cuando la condición no se cumpla*/
var todo_correcto = true;

/*El primer campo a comprobar es el del nombre. Lo traemos por id y verificamos
la condición, en este caso, por ejemplo, le decimos que tiene que tener más de dos dígitos
para que sea un nombre válido. Si no tiene más de dos dígitos, la variable todo_correcto
devolverá false.*/

if(document.getElementById('nombre').value.length < 2 ){
    todo_correcto = false;
}

/*Hacemos lo mismo con el campo dirección. En este caso le pediremos al usuario que
introduzca al menos 10 caracteres.*/
if(document.getElementById('direccion').value.length < 10 ){
    todo_correcto = false;
}

/*Para comprobar la edad, utilizaremos la función isNaN(), que nos dirá si el valor
ingresado NO es un número (NaN son las siglas de Not a Number). Si la edad no es un
número, todo_correcto será false.*/
if(isNaN(document.getElementById('edad').value)){
    todo_correcto = false;
}

/*Para comprobar el email haremos uso de una expresión regular. Esto es una secuencia
de caracteres que nos dirá si el valor ingresado por el usuario tiene estructura de
correo electrónico. Lo que hacemos es obtener el value del campo de texto destinado
al email, y le aplicamos el método test() del objeto global RegExp(que nos permite
trabajar con expresiones regulares).*/
var expresion = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;
var email = document.form1.email.value;
if (!expresion.test(email)){
    todo_correcto = false;
}

/*Para validar el select debemos añadir un value distinto a cada option. En el
código, he asignado un value con  valor vacío al primer option. Los siguientes,
al no estar definidos toman el valor por defecto. Por tanto, si todos tienen value,
lo único que tenemos que comprobar es que este no sea vacío. Si es vacío, todo_correcto
será false.*/
if(document.getElementById('estudios').value == ''){
    todo_correcto = false;
}

/*Validaremos también el checkbox del formulario. Todos los
checkbox tienen una propiedad llamada checked. Entonces
hacemos el if y decimos que si nuestro checkbox NO está
checked, estará mal.*/
if(!document.getElementById('acepto').checked){
    todo_correcto = false;
}

/*Por último, y como aviso para el usuario, si no está todo bién, osea, si la variable
todo_correcto ha devuelto false al menos una vez, generaremos una alerta advirtiendo
al usuario de que algunos datos ingresados no son los que esperamos.*/
if(!todo_correcto){
alert('Algunos campos no están correctos, vuelva a revisarlos');
}

return todo_correcto;
}

</script>

Acceder al ejemplo. A continuación se muestra una captura del formulario.

En el siguiente ejemplo hay un formulario que contiene tres campos de texto para escribir el nombre de tres marcas de coches, el formulario no se puede enviar si no se han escrito los tres nombres:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Validación de un formulario con JavaScript</title>

<script type="text/javascript">
function valida(f) {
  var ok = true;
  var msg = "Debes escribir contenido en los campos:\n";
  if(f.elements[0].value == "")
  {
    msg += "- Marca 1\n";
    ok = false;
  }

  if(f.elements["marca2"].value == "")
  {
    msg += "- Marca 2\n";
    ok = false;
  }

  if(f.marca3.value == "")
  {
    msg += "- Marca 3\n";
    ok = false;
  }

  if(ok == false)
    alert(msg);
  return ok;
}
</script>
</head>

<body lang="es">
Introduce tus marcas de coches favoritas<br>
<form id="miFormulario" action="" method="get" onsubmit="return valida(this)">
<p>
Marca 1: <input type="text" id="marca1" />
<br />
Marca 2: <input type="text" id="marca2" />
<br />
Marca 3: <input type="text" id="marca3" />
<br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</p>
</form>
</body>

</html>

Cuando se llama a la función valida() desde el evento onsubmit se le pasa como valor del parámetro this, que es un objeto que representa al formulario desde el que se invoca al método. En este ejemplo, se ha empleado el atributo id en vez del atributo name para identificar cada elemento, ya que XHTML 1.0 no permite el empleo del atributo name en la etiqueta<form>.

La función valida() debe devolver true o false según la validación haya sido correcta o haya fallado. Este valor debe ser devuelto al navegador: el valor true significa "continúa y envía el formulario al servidor", mientras que false significa "cancelar y no enviar el formulario". Por ello, en el código se debe escribir onsubmit="return valida(this)" para reenviar el valor devuelto al navegador.

Acceder al ejemplo

Top