Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Cargar
186 vistas

JavaScript Validar Formulario

En este archivo se muestra como validar un formulario con javascript para detectar los errorres antes de enviarlo, deveremos crear una funcion que mande a llamar a nuestro validador.

Cargado por

Oswaldo Ruiz
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
186 vistas

JavaScript Validar Formulario

En este archivo se muestra como validar un formulario con javascript para detectar los errorres antes de enviarlo, deveremos crear una funcion que mande a llamar a nuestro validador.

Cargado por

Oswaldo Ruiz
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

JavaScript.

Validar formularios
Vamos a utilizar JavaScript para detectar los errores en el formulario de la
pgina contacto.html antes de enviarlo, lo que permitir a los usuarios corregirlos
cmodamente.
Aunque validemos con JavaScript, siempre hay que validar tambin con PHP, ya que a un
usuario con un mnimo conocimiento de HTML y JavaScript no le resultar difcil quitar las
validaciones de la pgina, o simplemente, puede tener el JavaScript desactivado.

Validar con una funcin


En la propia pgina, ya que la funcin solo se utilizar en esta pgina, creamos una
funcin, a la que le pasamos el formulario.
Lo que har la funcin, es evaluar uno a uno los campos. Si encuentra un error, mostrar
un mensaje, pondr el foco (el punto de insercin) en el control, y devolver falso. Si no hay
errores, contina con el siguiente campo. Al final, si no se ha producido ningn error, debe de
devolver true.
Como le pasamos como parmetro el formulario, podemos acceder a los valores de so
control con la estructura formulario.nombre.value:
<script
type="text/javascript">
function
validarForm(formulario)
{
if(formulario.nombre.value.length==0) { //Tiene 0 caracteres?
formulario.nombre.focus();
// Damos el foco al control
alert('No has escrito tu nombre'); //Mostramos el mensaje
return
false;
//devolvemos
el
foco
}
return true; //Si ha llegado hasta aqu, es que todo es correcto
}
</script>

Utilizamos el mtodo .length, que devuelve la longitud de una cadena, para comprobar si
el nmero de caracteres es 0. Si es 0, la cadena est vaca.
Repetimos esto para el resto de comprobaciones, dejando el return true; al final del
todo, para que slo llegue ah si todos los campos estn correctos:

<script
type="text/javascript">
function
validarForm(formulario)
{
if(formulario.nombre.value.length==0) { //comprueba que no est
vaco
formulario.nombre.focus();
alert('No
has
escrito
tu
nombre');
return
false;
//devolvemos
el
foco
}
if(formulario.email1.value.length==0) { //comprueba que no est
vaco
formulario.email1.focus();
alert('No
has
escrito
tu
e-Mail');
return
false;
}
if(formulario.email1.value!=formulario.email2.value)
{
formulario.email1.focus();
//comprueba que sean
iguales
alert('Los
e-Mails
no
coinciden');
return
false;
}
if(formulario.consulta.value.length==0) { //comprueba que no est
vaco
formulario.consulta.focus();
alert('No
has
escrito
ninguna
consulta');
return
false;
}
return
true;
}
</script>

Ahora tenemos que llamar a la funcin. Lo haremos, cuando se vaya a enviar el formulario,
es decir, en el evento onsubmit del form.
<form
method="post"
validarForm(this);">

action="enviar_mail.php"

onsubmit="return

Observa que como parmetro hemos enviado this. Se trata de una palabra reservada que
equivale al objeto que ha producido el evento, en este caso el formulario. Adems, antes de la
funcin hemos puesto return. Lo hemos hecho, porque si en un evento ponemos return
false;, el evento se anula, en cambio si ponemos return true; contina. Por eso es
importante que la funcin devuelva false cuando queramos que no se enve el formulario, y
que devuelva true cuando queramos que se enve.

También podría gustarte