Validar formulario

El código del formulario

El formulario con el que vamos a trabajar es el siguiente:

<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.

Función Javascript para validar el formulario

Ahora veremos la función que hemos creado para validar el formulario. Se llama

valida_envia(). Simplemente, para cada campo del formulario, comprueba que el valor

introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la

aplicación en el campo que ha dado el error y abandona la función retornando el valor 0.

Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar

ningún campo incorrecto. Entonces ejecuta la sentencia última, que es el envío del

formulario.

Veamos la función entera, aunque luego la expliquemos por partes.

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.

Conclusión

Este ejercicio es de lo más básico y útil que se puede hacer en Javascript. Requiere ciertos
conocimientos, ya ligeramente avanzados, pero en el fondo no resulta complicado. Incluso
ampliarlo es bastante sencillo, siempre que sigamos un esquema similar para cada uno de
los campos.