Diseño Web 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.
Con todo eso claro, vamos, manos a la obra:
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:
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
5:48:29 pm
Muchas gracias por la información. Hace tiempo que buscaba algo pero nunca lo podia hacer funcionar…
Apenas lo pueda probar te aviso.
Gracias
9:12:23 pm
Como configuro el formulario de contacto con Java, para que lleguen los datos a mi correo
10:51:07 pm
@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
9:32:28 pm
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
11:22:36 am
Leonardo Faraone: Coloca la función antes de cerrar la etiqueta script del punto anterior y todo debería funcionar bien.
Saludos
1:59:37 pm
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
10:26:42 pm
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.
1:16:47 am
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
4:35:48 pm
@Moises:
¿Estás copiando el código directamente? Si es asi, probablemente las comillas te las haya pegado distintas. Te recomendamos revisar eso.
Saludos
5:58:31 pm
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