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? :)
<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? :)
Comentarios