Cómo validar un formulario en una página
web, en el lado del cliente con Javascript. Se comprueban todos sus
campos y si son correctos, se envía el formulario.
Vamos
realizar un ejemplo de un formulario completo para validar. Las
validaciones se hacen en el propio navegador antes de enviarlo. Si hubo
algún campo no relleno o con información errónea, el formulario muestra
el campo que está incorrecto y solicita al usuario que lo cambie. Si
todos los datos del formulario son correctos se envía el formulario.
Hemos querido hacer un formulario sencillo, para que el ejercicio no se
haga demasiado complicado. No obstante, se realizan validaciones en
campos con distintos valores, para hacerlo más variado. Se comprueba un
campo donde debe figurar un texto, otro donde debe introducirse un
número mayor que 18 y un último con un campo select donde deben haber
seleccionado un valor.
<form name="fvalida">
<table>
<tr>
<td>Nombre: </td>
<td><input type="text" name="nombre" size="30" maxlength="100"></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type="text" name="edad" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Interés:</td>
<td>
<select name=interes>
<option value="Elegir">Elegir
<option value="Comercial">Contacto comercial
<option value="Clientes">Atención al cliente
<option value="Proveedores">Contacto de proveedores
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</tr>
</table>
</form>
Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son:
- El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript.
- El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga de validar el formulario y enviarlo si todo fue correcto.
function valida_envia(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nombre.focus()
return 0;
}
//valido la edad. tiene que ser entero mayor que 18
edad = document.fvalida.edad.value
edad = validarEntero(edad)
document.fvalida.edad.value=edad
if (edad=="")
{
alert("Tiene que introducir un número entero en su edad.")
document.fvalida.edad.focus()
return 0;
}
else
{
if (edad<18)
{
alert("Debe ser mayor de 18 años.")
document.fvalida.edad.focus()
return 0;
}
}
//valido el interés
if (document.fvalida.interes.selectedIndex==0)
{
alert("Debe seleccionar un motivo de su contacto.")
document.fvalida.interes.focus()
return 0;
}
//el formulario se envia
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();
}
En el primer bloque se valida el campo nombre. La validación que se hace
es simplemente si se ha escrito algo en el campo. Para ello comprueba
si el número de caracteres escritos en el campo nombre es cero. En ese
caso, muestra el mensaje de alerta, sitúa el foco en el campo de texto y
se sale de la función devolviendo el valor 0.
| Nota: el foco de la aplicación es el lugar donde está situado el cursor. El foco puede estar en cualquier sitio. Por ejemplo en un campo de texto, en un select, en un enlace o en la propia página. Si presionamos una tecla del teclado afecta al lugar donde está situado el foco. Si, por ejemplo, el foco está en un campo de texto, al operar con el teclado estaremos escribiendo en ese campo de texto. |
La validación de la edad mayor que 18 años tiene dos partes. Primero
debemos comprobar que en el campo de texto hay escrito un valor entero.
Luego, si teníamos un entero, habría que comprobar que es mayor que 18.
Para hacer esta validación nos vamos a apoyar en una función que ya
hemos visto en otro artículo de DesarrolloWeb.com, que habla sobre cómo validar un entero en un campo de formulario. Esa función devuelve un string vació en caso de que no sea un entero y el propio entero, si es que lo era.
Antes de realizar la validación de la edad propiamente dicha, se obtiene
el valor introducido en el campo de formulario edad y se guarda en una
variable llamada edad. Luego se ejecuta la función pasando esta edad. Su
resultado lo utilizamos para volcarlo otra vez al campo de texto.
Entonces, se comprueba si el valor devuelto por la función es un string
vacío. En ese caso, es que el valor escrito en el formulario no era un
entero, por lo que se muestra el mensaje de error, se sitúa el foco y se
sale de la función.
En caso de que el campo edad contuviese un entero, se debe comprobar a
continuación si es mayor que 18. En caso de que sea menor, se muestra el
error y se sale. En caso contrario -entonces el valor sería mayor o
igual que 18-, se continúa con las comprobaciones.
Por último se valida el campo select, donde aparece el interés del
supuesto visitante, que le motiva para enviarnos el formulario. En ese
campo se debe haber seleccionado cualquier opción menos la primera. Para
asegurarnos, simplemente se comprueba si el atributo selectedIndex del
campo select tiene el valor 0. Ese atributo almacena el índice
seleccionado en el menú desplegable. El primer campo tiene el índice 0,
el segundo el índice 1...
Si se comprueba que selectedIndex vale 0, se muestra un mensaje de
alerta, se pone el foco en el campo del formulario y se sale de la
función.
Si hemos llegado hasta este punto sin salirnos de la función es que
todos los campos del formulario estaban rellenos correctamente. En ese
caso se debe enviar el formulario. Antes de enviar el formulario se
muestra un mensaje de alerta, agradeciendo que se haya rellenado
correctamente. Este mensaje se puede suprimir si se desea.
Para enviar el formulario se hace una llamada al método submit() de dicho formulario.
