Como validar campos de un formulario mediante Javascript

Cómo validar campos de un formulario mediante Javascript

Implementos necesarios:

1. Un editor Web (recomendamos y utilizamos Adobe Dreamweaver). Si no poseen, pueden escribir el código en algún editor de texto como block de notas.

Con todo eso claro, vamos, manos a la obra:
Procedimiento:

1.- Lo primero que haremos será crear un nuevo archivo HTML, en donde incluiremos un formulario y definiremos una función en Javascript que se encargará de la validación.

2.- En nuestro HTML, creamos un formulario, el cual contendrá 3 campos:

* Un campo de texto para ingresar el nombre.
* Un campo de texto para ingresar la edad.
* Una lista desplegable indicando el motivo del contacto.

Adicionalmente añadiremos un botón para el envío de datos. El código del formulario es el siguiente:

Código HTML:

 <form name=”form1″ action=”pagina-de-destino.html”> 
    <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>Motivo:</td> 
    <td> 
    <select name=motivo> 
    <option value=”Seleccionar”>Seleccionar 
    <option value=”General”>Contacto General 
    <option value=”Tecnico”>Problemas Técnicos  
    <option value=”Sugerencias”>Sugerencias 
    </select> 
    </td> 
    </tr> 
    <tr> 
    <td colspan=”2″ align=”center”><input type=”button” value=”Enviar” onclick=”validar_formulario()”></td> 
    </tr> 
    </table> 
    </form> 

Como podemos apreciar, el código es el estándar de un formulario como los que hemos hecho en otros tutoriales. Sin embargo, en la etiqueta HTML correspondiente al botón de envío hemos agregado un nuevo atributo llamado onclick, el cual cumple la función de que cuando se presione el botón en vez de cargar una página, llamará a una función Javascript de nombre validar_formulario()

3.- A continuación, añadiremos la función en Javascript que realizará la validación. El código es el siguiente, el cual debemos insertarlo entre las etiquetas y . Los comentarios van en negrita, cursiva y entre /* y */:

Código HTML:

 <script> /* Abrimos etiqueta de código */ 
    function validar_formulario(){ /* Abrimos la función validar_formulario */ 
    /* Partimos por validar que se haya ingresado un valor  para el nombre, esto lo hacemos mediante un if y preguntamos si el campo  es igual a 0, si es así, desplegamos un mensaje para que se ingrese el  nombre y volvemos al formulario. */  
    if (document.form1.nombre.value.length==0){ 
    alert(”Debe ingresar su nombre”) 
    document.form1.nombre.focus() 
    return 0; 
    } 

    /* Luego validamos la edad, viendo si se ingresa una mayor a 18  años. Asignamos primero a una variable el valor ingresado y luego  comprobando que no este vacío y que cumpla el requerimiento. También  llamaremos a una función validarEntero que definiremos en el siguiente  paso, dándole como parámetro la edad ingresada. Esta función realizará  las validaciones necesarias para definir si es un dato numérico. */ 
    edad = document.form1.edad.value 
    edad = validarEntero(edad) 
    document.form1.edad.value=edad 
    if (edad==”"[IMG]http://o1.t26.net/images/space.gif[/IMG]{ 
    alert(”Debe ingresar su edad.”) 
    document.form1.edad.focus() 
    return 0; 
    }else{ 
    if (edad<18){ 
    alert(”Debe ser mayor de 18″) 
    document.form1.edad.focus() 
    return 0; 
    } 
    } 

    /* Finalmente, validamos el motivo del contacto */ 
    if (document.form1.motivo.selectedIndex==0){ 
    alert(”Debe seleccionar un motivo de su contacto.”) 
    document.form1.interes.focus() 
    return 0; 
    } 

    /* Si paso todas las validaciones, desplegamos un mensaje de éxito y enviamos el formulario */ 
    alert(”Los datos fueron ingresados correctamente y seran enviados”); 
    document.form1.submit(); 
    } 
    </script> 

4.- A continuación de la función anterior, crearemos otra función que realizará una conversión del dato ingresado para la edad a entero y comprueba si lo que se ingresó es realmente un valor numérico:

Código HTML:

    function validarEntero(valor){ 
    /* Mediante parseInt intentaremos transformar el valor a número  entero. Si el dato fue ingresado bien y ya lo era, no hará nada */ 
    valor = parseInt(valor) 

    /* Se comprobará si el valor es un número */ 
    if (isNaN(valor)) { 
    /* Si no lo es, se devuelve una cadena vacía */ 
    return “” 
    }else{ 
    /* De lo contrario se devuelve el número */ 
    return valor 
    } 
    }

Y con ese procedimiento tenemos una sencilla validación activada para nuestro formulario. De esta forma, nos aseguraremos de que los datos enviados estén siempre correctos y no sobrecargaremos a nuestro servidor procesando datos que puedan estar nulos o incorrectos. Es sin duda muy útil.

fuente

http://www.comolohago.cl/2009/02/como-validar-campos-de-un-formulario-mediante-javascript/