Voy a poneros un ejemplo muy sencillo de como validar vía
javascript un formulario para que todos sus campos tengan contenido. Una vez mostrado el ejemplo os explicaré en plan sencillo como funciona.
<script>function validarFormulario(formulario){ if(formulario.nombre.value==""){ alert("El campo nombre está vacío"); formulario.nombre.focus(); return false; } if(formulario.apellidos.value==""){ alert("El campo apellidos está vacío"); formulario.apellidos.focus(); return false; } return true;}</script><form action="prueba.html" method="post" onsubmit="return validarFormulario(this)">Nombre: <input type="text" name="nombre"/>Apellidos: <input type="text" name="apellidos"/><input type="submit"/></form>Bueno, pues con este sencillo ejemplo lo que conseguimos es un formulario con los campos
nombre y
apellidos que una vez sea enviado correctamente intentará enviar sus datos a prueba.html.
¿Cómo funciona la validación?Pues muy fácil, por un lado (en la parte de abajo) tenemos un formulario con el
evento onsubmit, este evento se activa cuando enviamos el formulario, de tal manera que cuando hagamos
click sobre el botón de envío o le demos a la tecla
intro se lanzará el contenido de ese evento. Y el contenido de ese evento en concreto es
return validarFormulario(this), o sea, que le pedimos a la función
validarFormulario que nos devuelva un
valor booleano de
true(verdadero) o
false(falso) para decidir si se envía el formulario, si es
true se envía, si es
false no.
Vamos a analizar ahora la función de
javascript validarFormulario. Si nos fijamos contiene la variable
formulario que recoge el valor de
this, ¿Y qué es
this?,
this es el formulario al completo ya que ha sido invocado dentro del formulario,
this es literalmente el objeto desde el que se le menciona.
Estamos por lo tanto enviando el valor del formulario y de todos sus elementos a la función
validarFormulario por lo que podremos acceder sin problemas al contenido de los campos
nombre y
apellidos. ¿Cómo accedemos a ellos? Pues bien, la variable
formulario ha cargado el contenido de
this, por lo tanto tan sólo tendremos que poner
formulario.nombre o
formulario.apellidos para acceder a esos campos, como lo que nos interesa conocer es si están vacíos o no revisamos la propiedad
value, o sea,
formulario.nombre.value o
formulario.apellidos.value. Realizamos una comparación con
"" para ver si están vacíos o no con un
if (una condición) con el operador igual (
==) y si están vacíos (
=="") entonces lanzamos un mensaje de alerta, ponemos el foco en el campo y devolvemos un
false. Al devolver la función
validarFormulario un false el formulario no se envía.
Como podéis ver en la función, revisamos los campos
nombre y
apellidos de una manera muy similar. Una vez hemos pasado esas revisiones si no devolvemos ningún
false al final de la función devolvemos un
true (
return true), o sea, que le decimos al formulario que está todo correcto y puede ser enviado.
¿A qué es mucho más sencillo de lo que parece en un principio? :)