Validación completa de formulario Javascript

agami · #1 (**permalink**) 20/10/2012, 15:51

Hola de nuevo compañeros de Foros del Web!

Vengo con una dudita a la hora de validar un formulario al completo

Mi código es el siguiente:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tomate Algo</title>
<script>
 function validarForm (form) {
					var valorRetorno = true;
					var nombreUsuario = registro.usunom.value;
					var password = registro.usupass.value;
					var password2 = registro.usurepass.value;
					var email = document.getElementById('email').value;
					var email2 = document.getElementById('email2').value;
					var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

					//Comprobamos si nombreUsuario tiene más de 6 caracteres
					if (nombreUsuario.length < 6) {
					nombreUsuario = nombreUsuario.replace(/(<([^>]+)>)/ig,""); // quitás posible código html
					nombreUsuario = nombreUsuario.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
						valorRetorno = false;
						alert (“Tu nombre de usuario tiene que tener al menos \n6 caracteres.\n Por favor, inténtelo de nuevo.”);
						formRegistro.formNombreUsuario.focus();
					}	

					//Comprobamos que la password tiene más de 6 caracteres
					if (password.length < 6) {
						valorRetorno = false;
						alert(“La contraseña tiene que tener al menos \n6 caracteres.\n Por favor, inténtelo de nuevo.”);
						formRegistro.formPassword.value = “”;
						formRegistro.formPassword2.value = “”;
						formRegistro.formPassword.focus();
					}	

					//Comprobamos que las dos password son iguales
					if (password.value != password2.value) {
						valorRetorno = false;
						alert(“Las contraseñas no son iguales.\n Por favor, inténtelo de nuevo.”);
						formRegistro.formPassword.value = “”;
						formRegistro.formPassword2.value = “”;
						formRegistro.formPassword.focus();
					}
					//Comprobamos los emails
					var v_email = formato.test(email);
 
					if((v_email != true)||(email == "")){
						alert('Email no válido');
						return false;
					}
 
					var v_email2 = formato.test(email2);
 
					if((v_email2 != true)||(email2 == "")){
						alert('Email2 no válido');
						return false;
					}
					//Comprobamos cuántos elementos tiene el formulario y son requeridos
					var elementosForm = form.elements;
					for (var i=0; i<elementosForm.length; i++){
						elementoActual = elementosForm [i];
						if (elementActual.value==”” && elementoActual.className==”requerido”) {
							alert(“El campo requerido \””+elementoActual.name +”\” está vacío. Por favor, proporcione un valor.”);
							elementoActual.focus();
							valorRetorno = false;
							break;
						}
						return valorRetorno;
					}
					}
</script> 
<script type="text/javascript" src="cargarfechas.js" ></script>
</head>

<body onloadstart="cargarFecha()">
<form method="post" name="registro" action="#" onsubmit="return validarForm(this);">
Nombre: <input type="text" name="usunom" id="usunom"/>
</br>
Apellidos: <input type="text" name="usuapel" id="usuapel"/>
</br>
Fecha de nacimiento:
<select id="anhoNac" onchange="ponerDias()">
 <script>ponerAnho();</script>
</select>
<select id="mesNac" onchange="ponerDias()">
 <script>ponerMes();</script></select>
<select id="diaNac">
 <script>ponerDias();</script>
</select>
</br>
Email:<input type="text" value="" id="email" name="email" /><br />
Email 2:<input type="text" value="" id="email2" name="email2" /><br />

Contraseña: <input  type="password" name="usupass" id="usupass"/>
</br>
Repita contraseña: <input type="password" name="usurepass" id="usurepass"/>
</br>
<!--<p align="center"><img src="chequeo.php" width="300" height="30" border="1" /></p>--> 
     </br>
     <input type="submit" name="Registrate!" value="Registrate!">     
</form>
</body>
</html>

El problema es que hago submit y no hace nada... Si pudiesen decirme en que fallo!

juanito1712 · #2 (**permalink**) 20/10/2012, 19:01

bufff meternos mucho código y no ponerlos los mensajes de error al menos para que podamos ver por donde suenan las campanas sin que tengamos que abrir el dreamweaver y ponernos a currar

y ya en el codigo no se si será alguna movida del foro pero al pegarlo en dw hay unas cuantas comillas que no son las que tocan, son las comillas esas tumbadas fuleras que quedan muy bien en word pero que hacen saltar los compiladores.

alert (“Tu nombre de usuario tiene que tener al menos \n6 caracteres.\n Por favor, inténtelo de nuevo.”);

comillas como esas

y la otra es que tampoco encuentro que le digas al formulario que hacer con todo lo que tiene, le dices que no ejecute ninguna accion y que al enviarlo llame a una funcion la funcion hace lo que tiene que hacer devuelve lo que tiene que devolver y todo listo

tampoco habia visto nunca un return en una llamada de una funcion...
onsubmit="return validarForm(this);"
no se si es que esta mal o simplemente no lo habia viso nunca pero bueno me llama la atencion... pensaba que eso era cosa de las funciones y no de las llamadas; de todos modos aunque no hubiese return en la llamada, llamas a la la funcion devuelve true o false y ahi me da la sensacion que falte un submit

yo nunca he tratado los formularios de esta forma por lo que no te puedo dar una ayuda adaptandome a tu contenido pero te digo como lo haria yo

el input submit lo quitas, y lo cambias por un input button normal el cual en su onclick llame a la funcion que deseas

el onsubmit del formulario lo quitas y en el # del action pones la página que deberia recibir los datos como lo harias si no comprobases nada

y luego en la funcion le quitas el submit y el return lo sustituyes por algo del palo de

if(valorRetorno){
document.forms[0].submit();
}else{
alert("El formulario ha presentado los siguientes errores "+ errores)
}
revisa esa decision que la he escrito un poco a ojo y seguramente no este bien pero algo asi haria yo solo que yo normalmente en lugar de hacer saltar un alert nada mas me encuentro un error creo una variable de error y cada vez que encuentro uno le concateno al contenido actual el texto del error actual y al final del todo pasa lo de la decision que has visto, o hago el submit o le hago saltar el texto con todos los errores de golpe, personalmente me molestan mucho los formularios que me van diciendo los fallos de uno en uno y a cada submit me hacen escribirle una cosa mas... pero para eso deberias modificar esto

alert('Email no válido');
valorRetorno false;

por esto

error+="\n Email no valido";
valorRetorno=false;

a ver si te va bien ;)

caricatos · #3 (**permalink**) 20/10/2012, 23:42

Hola:

Cita:

Iniciado por juanito1712

...
tampoco habia visto nunca un return en una llamada de una funcion...
onsubmit="return validarForm(this);"
no se si es que esta mal o simplemente no lo habia viso nunca pero bueno me llama la atencion... pensaba que eso era cosa de las funciones y no de las llamadas; de todos modos aunque no hubiese return en la llamada, llamas a la la funcion devuelve true o false y ahi me da la sensacion que falte un submit

yo nunca he tratado los formularios de esta forma por lo que no te puedo dar una ayuda...

Evidentemente tú mismo estás reflexionando correctamente

... ya que el procedimiento que nunca habías visto es lo que debe hacerse...

Lectura recomendada: El abc de los formularios.

Sobre la pregunta, es algo difícil responder porque a simple vista parece estar bien, pero la referencia "registro" en las primeras líneas no es lo correcto... debería estar precedido por document.forms al ser de la colección de formularios del documento (sí, aunque sea solo uno es parte de una colección)... o poner el valor que le has dado en la función: "form"... aunque es preferible usar otro identificador (para evitar problemas...)

Dinos si te vale, o explica mejor el problema...

Saludos

agami · #4 (**permalink**) 21/10/2012, 03:52

Muchas gracias a ambos compañeros!

He tocado un poquito ya le código y me controla un poco todo, lo único que me falla es la validación de la repetición de la password y que al hacer submit da igual que me salte cualquier error me ejecuta el action del form.

Creo que seria con la variable valorRetorno, preguntar y si es false no hacer submit y si no lo es hacerlo no? pero tendría que ser con button como decía juanito no?

Les dejo el código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tomate Algo</title>
<script>
 function validarForm (form) {
					var valorRetorno = true;
					var nombreUsuario = document.forms.registro.usunom.value;
					var password = document.forms.registro.usupass.value;
					var password2 = document.forms.registro.usurepass.value;
					var email = document.getElementById('email').value;
					var email2 = document.getElementById('email2').value;
					var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

					//Comprobamos si nombreUsuario tiene más de 6 caracteres
					if (nombreUsuario.length < 6) {
					nombreUsuario = nombreUsuario.replace(/(<([^>]+)>)/ig,""); // quitás posible código html
					nombreUsuario = nombreUsuario.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
						valorRetorno = false;
						alert ("Tu nombre de usuario tiene que tener al menos \n6 caracteres.\n Por favor, inténtelo de nuevo.");
						document.forms.usunombre.value.focus();
					}	
					
					//Comprobamos los emails
					var v_email = formato.test(email);
 
					if((v_email != true)||(email == "")){
						alert('Email no válido');
						valorRetorno = false;
						document.forms.registro.email.value = "";
						document.forms.registro.email2.value ="";
						document.forms.registro.email.value.focus();
					}
 
					var v_email2 = formato.test(email2);
 
					if((v_email2 != true)||(email2 == "")){
						alert('Email2 no válido');
						valorRetorno = false;
						document.forms.registro.email2.value ="";
						document.forms.registro.email2.value.focus();
					}
					
					//Comprobamos que la password tiene más de 6 caracteres
					if (password.length < 6) {
						valorRetorno = false;
						alert("La contraseña tiene que tener al menos \n6 caracteres.\n Por favor, inténtelo de nuevo.");
						document.forms.registro.usupass.value = "";
						document.forms.registro.usurepass.value = "";
						document.forms.registro.usupass.value.focus();
					}	

					//Comprobamos que las dos password son iguales
					if (password.value != password2.value) {
						valorRetorno = false;
						alert("Las contraseñas no son iguales.\n Por favor, inténtelo de nuevo.");
					document.forms.registro.usupass.value = "";
						document.forms.registro.usurepass.value = "";
						document.forms.registro.usupass.value.focus();
					}
					
					//Comprobamos cuántos elementos tiene el formulario y son requeridos
					var elementosForm = form.elements;
					for (var i=0; i<elementosForm.length; i++){
						elementoActual = elementosForm [i];
						if (elementActual.value=="" && elementoActual.className=="requerido") {
							alert("El campo requerido \""+elementoActual.name +"\" está vacío. Por favor, proporcione un valor.");
							elementoActual.focus();
							valorRetorno = false;
							break;
						}
						return valorRetorno;
					}
					}
</script> 
<script type="text/javascript" src="cargarfechas.js" ></script>
</head>

<body onloadstart="cargarFecha()">
<form method="post" name="registro" action="validacionreg.php" onsubmit="return validarForm(this)">
Nombre: <input type="text" name="usunom" id="usunom" value="<?php echo $rnombre; ?>"/>
</br>
Apellidos: <input type="text" name="usuapel" id="usuapel" value="<?php echo $rapellido; ?>"/>
</br>
Fecha de nacimiento:
<select id="anhoNac" onchange="ponerDias()">
 <script>ponerAnho();</script>
</select>
<select id="mesNac" onchange="ponerDias()">
 <script>ponerMes();</script></select>
<select id="diaNac">
 <script>ponerDias();</script>
</select>
</br>
Email:<input type="text" value="" id="email" name="email" value="<?php echo $remail; ?>"/><br />
Email 2:<input type="text" value="" id="email2" name="email2" /><br />

Contraseña: <input  type="password" name="usupass" id="usupass"/>
</br>
Repita contraseña: <input type="password" name="usurepass" id="usurepass"/>
</br>
<!--<p align="center"><img src="chequeo.php" width="300" height="30" border="1" /></p>-->
     </br>
     <input type="submit" name="Registrate!" value="Registrate!">     
</form>
</body>
</html>

Muchas gracias por su tiempo :)

emprear · #5 (**permalink**) 21/10/2012, 06:24

En primer lugar te señalo que tu html contiene errores. Una vez hecha correctamente la identificación de los campos como te señalo @caricatos, estás cometiendo el siguiente error.
Hay dos formas básicas de hacerlo, la primera, ir verificando cada campo y, si hay error, mostrar un mensaje y cancelar el envío, la otra, realizar todas las validaciones, acumular los mensajes de error y mostrarlos todos juntos.

Creo que el siguiente ejemplo es más ilustrativo, las validaciones no son necesariamente las mismas, pero por ahí no pasa el problema, sino por la manera en que intentás cancelar el submit.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
label{
width: 150px;
display: inline-block;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
function validar(){
 var mensaje = "";
var nombre = document.getElementById('nombre').value;
var email = document.getElementById('email').value;
var email2 = document.getElementById('email2').value;
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 
// validamos si el campo nombre está vacío o no
nombre = nombre.replace(/(<([^>]+)>)/ig,""); // quitás posible código html
nombre = nombre.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
if(nombre == ''){
//alert('Ingrese su nombre')
mensaje += "<p>falta nombre<\/p>";
//return false;
}
 
var regex_email = formato.test(email);
 
if((regex_email != true)||(email == "")){
//alert('Email no válido');
mensaje += "<p>falta email 1<\/p>";
//return false;
}
 
var regex_email2 = formato.test(email2);
 
if((regex_email2 != true)||(email2 == "")){
//alert('Email2 no válido');
mensaje += "<p>falta email 2<\/p>";
//return false;
}
 
if(email != email2){
//alert('los emails no coinciden');
mensaje += "<p>email no coincide<\/p>";
//return false;
}
 
if(mensaje == ""){
/// Si no hubo ningún error, el form se procesa
alert('gracias ' + nombre);
}else{
document.getElementById('mensajes').innerHTML = mensaje;
return false;
}
}
 
//]]>
</script>
</head>
<body>
<div>
<form action="#" onsubmit="return validar();"><label for="nombre">Nombre:</label> <input type="text" value="" id="nombre" name="nombre" /><br />
<label for="email">Email:</label> <input type="text" value="" id="email" name="email" /><br />
<label for="email2">Verificar Email:</label> <input type="text" value="" id="email2" name="email2" /><br />
<input type="submit" value="Enviar" /></form>
</div>
<div id="mensajes"></div>
</body>
</html>

En el ejemplo señalado se comprueban todos los campos y luego se genera un mensaje.
Luego hacé lo siguiente, descomenta los alert() y el return false; en cada validación, con lo que recibirás los mensajes individualmente y se cancelará el envío.

Espero te haya orientado
Saludos

juanito1712 · #6 (**permalink**) 21/10/2012, 09:07

si he entendido lo que ha pasado caricatos entonces el problema lo tienes en action="#"
ya que una vez el script ha realizado todas las comprobaciones y devuelve true, llama al action que simplemente no hace nada, ahi deberías enviárselo a una página en php para que los procese

cuando he pegado el codigo y arreglado lo de las comillas funcionaba todo perfectamente y terminaba en # solo que eso no hace nada por asi decirlo

emprear · #7 (**permalink**) 21/10/2012, 10:34

Cita:

Iniciado por juanito1712

si he entendido lo que ha pasado caricatos entonces el problema lo tienes en action="#"
ya que una vez el script ha realizado todas las comprobaciones y devuelve true, llama al action que simplemente no hace nada, ahi deberías enviárselo a una página en php para que los procese

cuando he pegado el codigo y arreglado lo de las comillas funcionaba todo perfectamente y terminaba en # solo que eso no hace nada por asi decirlo

@juanito1712
El action del segundo código mostrado por @agami es
action="validacionreg.php"
y sigue teniendo el mismo error que mencioné

SAludos