Javascript

Ξ 22 comentarios

Cómo validar campos de un formulario mediante Javascript

por Xabadu
Cómo validar campos de un formulario mediante Javascript

Hoy en día, es muy común utilizar una serie de formularios en nuestros sitios Web. Ya sea para establecer canales formales de contacto, o si necesitamos autentificar usuarios para acceder a los contenidos o simplemente para distintas funcionalidades que podamos ofrecer, sin duda que es la herramienta más útil, sencilla y conocida que hay.

Un aspecto importante de estos formularios es que los usuarios ingresen los datos solicitados para que podamos operar con ellos. Si bien una vez que envían esta información podemos validarla al momento de ser procesada, esto muchas veces causa recargas innecesarias en el servidor y es por eso que es mucho mejor hacer la validación antes de que sea enviada y así cargar el contenido siguiente solo si es necesario.

Hoy les enseñaremos una sencilla validación mediante Javascript.

Todo el detalle, como siempre, después del salto.

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:

<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 <head> y </head>. Los comentarios van en negrita, cursiva y entre /* y */:

<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==””){
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:

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.

Como siempre, este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

22 Comentarios

  • Muchas gracias por la información. Hace tiempo que buscaba algo pero nunca lo podia hacer funcionar…

    Apenas lo pueda probar te aviso.

    Gracias

  • Como configuro el formulario de contacto con Java, para que lleguen los datos a mi correo

  • @cristian: Si quieres que los datos lleguen a tu correo de forma directa, una forma es que en el atributo actiond el formulario pongas mailto:tu email.

    De lo contrario, te recomendamos revisar este tutorial donde hemos cubierto el proceso completo.

    Saludos

  • Hola cuando coloco el punto 4 no queda bien ¿es que hay que colocarlo bajo las etiquetas dentro del Head?
    me queda el botón Enviar entre comillas sin la función de botón

    Gracias

  • Leonardo Faraone: Coloca la función antes de cerrar la etiqueta script del punto anterior y todo debería funcionar bien.

    Saludos

  • porfa, pon los ficheros del ejemplo para descarga, ya que el editor del blog te cambia las comillas y entonces el copiar el codigo de la pagina tampoco sirve.
    un saludo

  • Hola, quiero saber como hago para que esos datos me los deje anotados en algun txt o me los mande por mail. Me seria de gran ayuda.

    Con que se anoten en un txt me alcanza y me sobra!

    Gracias.

  • Hola eh probado su codigo para validar 2 campos; correo y nombre pero hasta ahorita no me sale ningun mensaje de alerta que son los que se supone q debe salir( Usted debe escribir su nombre), me dirreciona directamente a la pagina de destino que es “datos.php”, nose pq nO pasa nada, alguien q me ayude, lo eh corrido en un servidor pero sigue el mismo resultado

    saludos

  • @Moises:

    ¿Estás copiando el código directamente? Si es asi, probablemente las comillas te las haya pegado distintas. Te recomendamos revisar eso.

    Saludos

  • hola si el codigo esta bien, mira Juan lo acabo de comprobar em otro navegador con FireFox y ahora si me muestra los msj de alerta, pero en IExplore8 no , creo q debe tar mal configurado por eso no muestra, sabes q debo configurar para que me muestre…

    saludos

1 2 3

Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos