Foros del Web » Programando para Internet » Javascript »

Formulario se envia sin validar

Estas en el tema de Formulario se envia sin validar en el foro de Javascript en Foros del Web. Gente del foro: tengo un problema que se envia el formulario con los campos vacios mostrando los errores. Les paso el codigo: Código: <script type="text/javascript"> ...
  #1 (permalink)  
Antiguo 03/07/2011, 15:58
Avatar de kaman10  
Fecha de Ingreso: enero-2011
Ubicación: Uruguay
Mensajes: 63
Antigüedad: 13 años, 11 meses
Puntos: 1
Formulario se envia sin validar

Gente del foro: tengo un problema que se envia el formulario con los campos vacios mostrando los errores.
Les paso el codigo:
Código:
<script type="text/javascript">
function validar(){
var error=false;
//valido el nombre
if (document.getElementById('nombre').value.length==0){
	document.getElementById('errorNombre').style.display='block';//muestro mensaje de error
	error= true;
	}else{ 
	document.getElementById('errorNombre').style.display='none';//oculto mensaje de error
    return false
	}

//valido el email
//campo vacio
if (document.getElementById("email").value.length==0){
    document.getElementById("errorEmail").style.display='block';//muestro mensaje de error	
	error= true;
	}else{ 
	document.getElementById("errorEmail").style.display='none';//oculto mensaje de error
    return false
	} 
//valido expresion	
	var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/
if (!expreg.test(document.getElementById("email").value)) {
	document.getElementById("errorEmail").style.display='block';
	error= true;
	}else{ 
	document.getElementById("errorEmail").style.display='none';
    return false
	}
	
//el formulario fue validado y se envia
	alert("Gracias, el formulario ha sido completado correctamente y será enviado.");
	document.formulario.submit();
	} 	
</script>
Este es el formulario:
Código HTML:
<form id="formulario" onSubmit="!return validar()" action="validacion_js.html">
<table>
<thead></thead>
<tbody>

<tr>
<td>Nombre:</td>
<td>
<input type="text" id="nombre" />
</td>
<td>
<span id="errorNombre" style="display:none;color:red;" >
El campo es obligatorio
</span>
</td>
</tr>

<tr>
<td>Correo:</td>
<td>
<input type="text" id="email" />
</td>
<td>
<span id="errorEmail" style="display:none;color:red;">
El campo es obligatorio y debe estar correctamente escrito
</span>
</td>
</tr>

<tr>
<td>
<button id="enviar" onclick="validar()">Enviar</button>
</td>
</tr>

</tbody>
</table>
</form> 
espero que me puedan ayudar.
Saludos
  #2 (permalink)  
Antiguo 03/07/2011, 16:20
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 1 mes
Puntos: 122
Respuesta: Formulario se envia sin validar

Tienes varios errores. Uno de ellos es que en cada chequéo que haces, si este está correcto terminas la ejecución.
Además haces return false, lo que con el ! que tienes en el onsubmit se convierte en true, lo que te manda el formulario.
Te recomiendo que leas sobre el tema por que lo estás haciendo mal.
http://www.elated.com/articles/form-...th-javascript/
__________________
twitter: @imbuzu
  #3 (permalink)  
Antiguo 04/07/2011, 21:45
Avatar de kaman10  
Fecha de Ingreso: enero-2011
Ubicación: Uruguay
Mensajes: 63
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: Formulario se envia sin validar

Gracias por la ayuda, problema solucionado.
saludos
  #4 (permalink)  
Antiguo 04/07/2011, 22:27
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 1 mes
Puntos: 122
Respuesta: Formulario se envia sin validar

No hay problema, me alegra que hayas solucionado tu problema :D
__________________
twitter: @imbuzu

Etiquetas: envia, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:54.