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

  • @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.

  • 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?

  • 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

  • @Oscar: Sería bueno que añadieras tu código para que te ayudemos a encontrar el error.

    Saludos!

  • 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!!!

  • y como hago para que el campo de nombre no se le pueda ingresar numeros?????

  • 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

  • Como puedo validar un e-mail, ademas de validar un envio adjunto de archivo

    gracias y muy buen post

  • 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.

  • Excelente, muy simple, explicativo y funciona muy bien.

1 2 3

Deja un comentario

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

Gente linda que nos quiere

Donde mas estamos