Java Escript

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.
Por Miguel Angel Alvarez
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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, parahacerlo 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.
Referencia: para comprender este ejercicio hace falta conocer el trabajo con formularios con Javascript. Podemos aprender también Javascript desde cero http://www.desarrolloweb.com/javascript/, si esque fuera necesario. |

Se puede ver el ejemplo en funcionamiento para hacerse una idea más exacta del objetivo buscado.

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
    <optionvalue="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 prestaratenció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 validarel 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úncampo 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 laedad. 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.")
         ...