Validar campos de formulario HTML con Javascript 1 Josué Martínez V.
Validar campos de formulario HTML con Javascript En este ejercicio vamos a validar simplemente 2 campos, en un sencillo formulario:
La idea es que, una vez que el formulario sea enviado, seamos redirigidos a la siguiente página de confirmación:
Nótese que en lugar de esta página de confirmación podemos redirigirnos a un archivo PHP que cuente con el código necesario para enviar los datos a alguna cuenta de correo electrónico, por ejemplo.
Validar campos de formulario HTML con Javascript 2 Josué Martínez V. Se desea que ambos campos sean obligatorios, mostrando un aviso al usuario en caso de no completar alguno, de la siguiente manera:
Primer paso: definir detalles en el formulario <form id="elFormulario" name="elFormulario" method="post" action="Formulario enviado.html" onSubmit="return validarFormulario(this)"> <table width="37%" border="0" cellspacing="10" cellpadding="10"> <tr> <td>Nombre</td> <td><label> <input type="text" name="nombre" id="nombre" /> </label></td> </tr> <tr> <td>Comentario</td> <td><label> <textarea name="comentario" id="comentario" cols="45" rows="5"></textarea> </label></td> </tr> <tr> <td>&nbsp;</td> <td><label> <input type="submit" name="enviar" id="enviar" value="Enviar" /> </label></td> </tr> </table> </form>
En el encabezado del formulario se debe indicar la página a la cual deberá redirigirnos una vez que sea enviado, esto se indica en el atributo “action”. El otro detalle importante se encuentra en el atributo “onSubmit”, en el cual debemos utilizar la sintaxis “return nombreFuncion(parámetro)”. Ahora bien, la función “validarFormulario(param)” aún no la hemos creado, y precisamente ese será el siguiente paso.
Validar campos de formulario HTML con Javascript 3 Josué Martínez V.
Segundo paso: crear la función que valida los campos Para definir una función Javascript dentro de HTML podemos hacerlo de la siguiente manera: <html> <head> <script type=”text/javascript”>CodigoJavascript();</script> </head> <body>El cuerpo de la página</body> </html>
Ahora, creamos la función: function validarFormulario(elFormulario){ if(elFormulario.nombre.value == ''){ alert('Indique su nombre'); elFormulario.nombre.focus(); return false; } if(elFormulario.comentario.value == ''){ alert('Indique cuál es su comentario'); elFormulario.comentario.focus(); return false; } return true; }
Entonces, ¿cómo funciona? Cuando damos “click” en el botón, se activa el evento “onSubmit” del formulario, invocando la función validarFormulario(this), o sea, pasando como parámetro a sí mismo. Dentro de la función, hay un “if” por cada campo que deseemos validar. Si el campo está vacío se muestra un aviso (alert), luego se coloca el “focus” sobre el campo y finalmente se retorna “false”. Este valor “booleano” le indica al formulario si debe o no, ejecutar el evento “action”.
Validar campos de formulario HTML con Javascript 4 Josué Martínez V. Finalmente, si todos los “if” fueron evadidos, significando que todos los campos están completos, simplemente se retorna “true”, accionando el evento “action”, el cual nos redirige a la página “Formulario enviado.html”, en este caso. Para tener acceso a los elementos HTML desde Javascript utilizamos simplemente el valor que este tenga, ya sea en el atributo “name” o en “id”. Otro detalle es que, en este ejercicio, la validación realizada dentro del “if” es muy sencilla, y es obvio que no es la más adecuada, pero ya eso queda a criterio del desarrollador y los requerimientos del sitio web.