[SOLUCIONADO] Error validación de formulario

temerariomalaga · #1 (**permalink**) 24/03/2013, 12:33

Buenas, tengo un problema con la validación de un formulario. Al comprobar si el script funciona he dejado todos los campos obligatorios en blanco y el formulario pasa, no me sale ningún mensaje de error.
El código del script encargado de realizar la validación es el siguiente:

Código:

<script language="JavaScript">
		function validacion(){
			nombre = document.getElementById("nombre").value;
			email = document.getElementById("email").value;
			asunto = document.getElementById("asunto").value;
			mensaje = document.getElementById("mensaje").value;
			if(nombre==null || nombre.lenght==0 || /^\s+$/.test(nombre)){
				alert('[ERROR] El campo nombre está incompleto'); return false;
			}
			else if(!(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(email)) ){
				alert('[ERROR] La dirección de email no es válida'); return false;
			}
			else if(asunto==null || asunto.lenght==0 || /^\s+$/.test(asunto)){
				alert('[ERROR] El campo asunto está incompleto'); return false;
			}
			else if(mensaje==null || mensaje.lenght==0 || /^\s+$/.test(mensaje)){
				alert('[ERROR] No ha introducido ningún mensaje'); return false;
			}
			return true;
		}
	</script>

el script se ejecuta con el evento onsubmit="return validacion()" dentro del formulario.
¿Alguien sabe por qué no funciona mi script?
Gracias de antemano

emprear · #2 (**permalink**) 24/03/2013, 13:09

el nombre de la propiedad es length no lenght
Además la expresión regular para email tiene un fallo

Código:

<script type="text/javascript">
		function validacion(){
			nombre = document.getElementById("nombre").value;
			email = document.getElementById("email").value;
			asunto = document.getElementById("asunto").value;
			mensaje = document.getElementById("mensaje").value;
			var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			if(nombre.length==0){
				alert('[ERROR] El campo nombre está incompleto'); return false;
			}
			else if(!(formato.test(email)) ){
				alert('[ERROR] La dirección de email no es válida'); return false;
			}
			else if(asunto==null || asunto.length==0 || /^\s+$/.test(asunto)){
				alert('[ERROR] El campo asunto está incompleto'); return false;
			}
			else if(mensaje==null || mensaje.length==0 || /^\s+$/.test(mensaje)){
				alert('[ERROR] No ha introducido ningún mensaje'); return false;
			}
			return true;
		}
	</script>

temerariomalaga · #3 (**permalink**) 24/03/2013, 13:36

Gracias por la respuesta, lo he probado de nuevo y sigue sin funcionar, este formulario está siendo un desastre porque ni se valida ni se envia

dejo aqui el codigo entero de la web por si el fallo se encuentra en otra parte.

Código HTML:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Contacto - Representaciones Jesús Suviri</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
	<meta name="author" content="Abel Suviri">
	<meta name="keywords" content="baño, ducha, grifo, mampara, representaciones, suviri">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript">
		function validacion(){
			nombre = document.getElementById("nombre").value;
			email = document.getElementById("email").value;
			asunto = document.getElementById("asunto").value;
			mensaje = document.getElementById("mensaje").value;
			var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			if(nombre==null || nombre.length==0 || /^\s+$/.test(nombre)){
				alert('[ERROR] El campo nombre está incompleto'); return false;
			}
			else if(!(formato.test(email)){
				alert('[ERROR] La dirección de email no es válida'); return false;
			}
			else if(asunto==null || asunto.length==0 || /^\s+$/.test(asunto)){
				alert('[ERROR] El campo asunto está incompleto'); return false;
			}
			else if(mensaje==null || mensaje.length==0 || /^\s+$/.test(mensaje)){
				alert('[ERROR] No ha introducido ningún mensaje'); return false;
			}
			return true;
		}
	</script>	
</head>
<body>
<div id="banner">
		<img src="images/banner.gif"></img>
	</div>
	<div id="menu">
		<ul>
			<li><a href="index.html">inicio</a>
			<li><a href="firmas.html">firmas</a>
			<li><a href="productos.html">productos</a>
			<li><a href="descargas.html">descargas</a>
			<li><a href="contacto.html">contacto</a>
		</ul>
	</div>	
	<div id="contacto">
		<h1>Jesús Suviri</h1>
		Telf. 610 725 255<br>
		Fax. 952 411 242<br>
		Mail: [email protected]<br>
		MÁLAGA
	</div>	
	<hr>
	<div id="formulario">
		<p>Puede contactar también rellenando el siguiente formulario con los datos solicitados.</p>
		<form name="formulario" action="envio.php" method="post" onsubmit="return validacion()">
			<table>
				<tr>
					<td>Nombre:</td>
					<td><input type="text" name="nombre" id="nombre" value="" size="50"/></td>
				</tr>
				<tr>
					<td>E-mail:</td>
					<td> <input type="text" name="email" id="email" value="" size="50"/></td>
				</tr>
				<tr>
					<td>Asunto:</td>
					<td><input type="text" name="asunto" id="asunto" value="" size="50"/></td>
				</tr>
				<tr>
					<td>Introduzca su mensaje:</td>
					<td><textarea cols="30" rows="10" ></textarea></td>	
				</tr>
				<tr>
					<td><input type="submit" value="Enviar"/><input type="reset" value="Limpiar"/></td>
				</tr>
			</table>
		</form>
	</div>	
	<div id="copyright">
	Diseñado por Abel Suviri ([email protected]) 
	</div>
</body>
</html>

emprear · #4 (**permalink**) 24/03/2013, 15:23

A ver vamos a ordenarlo un poco, hay varias formas de hacer esto

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">
 
function validar(){
    // menos el de email. limpiamos los campos con la funcion limpiar()
var nombre = limpiar(document.getElementById('nombre').value);
var email = document.getElementById('email').value;
var asunto = limpiar(document.getElementById('asunto').value);
var mensaje = limpiar(document.getElementById('mensaje').value);
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; // expresion para validar email
 
if(nombre == ""){
alert('Ingrese su nombre')
return false; // devolvés false si hay error
}
var v_email = formato.test(email);
 
if((v_email != true)||(email == "")){ // test() devuelve true solo si se verifica la regExp
alert('Email no válido');
return false;
}
 
if(asunto == ""){
alert('Ingrese el asunto')
return false;
}
 
if(mensaje == ""){
alert('Ingrese el mensaje')
return false;
}
 
 
/// Si no hubo ningún error, el form se procesa y se envía aal action del form
 
alert('gracias ' + nombre);
 
}
 
 
function limpiar(valor){
var valor_campo = valor.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
return valor_campo;
}
 
</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="asunto">Asunto: </label><input type="text" id="asunto" name="asunto" /><br />
<label for="mensaje">Mensaje: </label><input type="text" id="mensaje" name="mensaje" /><br />
<input type="submit" value="enviar" />
</form>
</div>
</body>
</html>

Asi te debería funcionar
Saludos

temerariomalaga · #5 (**permalink**) 25/03/2013, 10:21

Muchas gracias, ya me funciona perfectamente el script, ahora solo me hace falta que funcione el php, muchas gracias compi