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
9:19:28 pm
@Moises: Lo más probable es que en las opciones esté desactivada la ejecución de páginas con Javascript, te recomiendo revisar eso.
Saludos.
4:07:28 pm
Hola, me sale el mismo error que Moises , tambien trato de verificar los campos vacios desde el boton a una pagina “siguiente.php”; la unica diferencia que veo con tu codigo es que no uso un tipo “button” sino un “submit” para pasar los datos. Sera este el detalle?
3:20:59 pm
Que tal, muy buen aporte. Solo que tengo un pequeño detalle y quisera que me ayudasen, bueno les explico. Uso un codigo similar a este, para validar un comobobox y todo de maravilla, me alerta si no seleccione ninguno y si selecciono alguno, me hace el submit, pero el detalle es eso, que yo creo que si me hace submit pero al parecer no por que solo refresca la pagina y verifico si viene cargado algun id en el combo, por medio de la variable post y no hay nada, espero me puedan ayudar por que del lado de la validacion esta perfecto este code, pero ya para usar los datos parece ser que envia nada por post, gracias de antemano
3:35:02 pm
@Oscar: Sería bueno que añadieras tu código para que te ayudemos a encontrar el error.
Saludos!
9:27:56 pm
buenas disculpa quisiera saber como hacer para validar el boton xq ok me valida los campos vacios pero igual me manda a la otra pagina donde hago la validacion del usuario y contraseña, espero que puedas ayudarme gracias!!!
1:17:42 pm
y como hago para que el campo de nombre no se le pueda ingresar numeros?????
5:21:10 pm
buen aporte, nada más que no tiene que ver la imagen que pones con el código que explicas? sobre todo por que es interesante como validar campos de email a través de expresiones regulares, sería bueno que lo añadieras! Saludos
5:16:56 pm
Como puedo validar un e-mail, ademas de validar un envio adjunto de archivo
gracias y muy buen post
3:17:55 pm
Estimados, me funciona correctamente pero tengo un solo problema, que al momento de darle enviar el formulario pasa a la siguiente pagina entonces no me valida el campo.
10:13:14 pm
Excelente, muy simple, explicativo y funciona muy bien.