Problema validando un pequeño formulario en js

ananda · #1 (**permalink**) 05/03/2013, 10:57

Hola, hice un código para validar un formulario con javascript antes de enviarlo al servidor para prevenir que no hubiera ningún campo vacío y hoy me he dado cuenta de que ya no funciona. He cambiado el botón de enviar por un submit y funciona a la perfección pero si pongo un button como ahora no funciona. Lo que hago es hacer clic en el button y entonces me lleva a la función que procura que no haya ningún campo vacío, si lo hay sale un cartel diciendo algo tipo: Hay un campo vacío y si todos los campos está lleno debería hacer submit en el form. Siempre me ha funcionado pero no sé por que razón ahora ya no, a ver si me podéis echar una mano, gracias!

Código PHP:

  function comprobar2(){ 
if (( document.getElementById("name").value.length==0) || (document.getElementById("surname").value.length==0 ) || 
(document.getElementById("correo2").value.length==0 ) || (document.getElementById("contraseña").value.length==0) || (document.getElementById("inputString").value.length==0)){ 
       javascript:cartelmax.className='max' 
       document.getElementById("name").focus() 
       return 0; 
           }else{ 
             document.perfil.submit(); 
           } 
} 
 
 
<form action="creausuarios.php" method="post" id="perfil" name="perfil"> 
 <div class="divinput" > 
<input type="text" maxlength="20" id="name" onkeypress="valida2(event)" name="name" placeholder="Nombre" class="input" /><br/> 
<input type="text" maxlength="20" id="surname" onkeypress="valida2(event)" name="surname" placeholder="Apellidos" class="input"  /><br/> 
<input type="text" maxlength="60" placeholder="Correo electrónico" onkeypress="valida2(event)" id="correo2" name="correo2" class="input"  /><br/> 
<input type="password" maxlength="30" placeholder="Contraseña" onkeypress="valida2(event)" class="input" id="contraseña" name="contraseña"   /><br/> 
</div> 
  
        <div> 
         <input type="text" class="selectcolegio" placeholder="Nombre de la escuela" name="selectcolegio" size="30" value="" id="inputString2" onkeyup="lookup2(this.value);" /> 
        </div> 
        <div id="suggestions2"></div> 
<input type="button" id="reg" name="reg" value="Registrarse" class="botonsubmit" onclick="comprobar2()" /> 
</form>

emprear · #2 (**permalink**) 05/03/2013, 12:08

Ese código tal cual está tiene muchísimos errores, no entiendo como es que te funcionaba.
Primero te aconsejo leas detenidamente este post
http://www.forosdelweb.com/f13/valid...lario-1031083/
También podés hacer esto
http://foros.emprear.com/javascript/...submit_ok.html
Saludos

ananda · #3 (**permalink**) 06/03/2013, 00:32

El error por el que no funcionaba era porque antes tenía el input de la escuela con name "inputstring" y hace poco lo cambié por "inputstring2" sin modificar la función javascript así que ya está solucionado. Cuales son los otros errores de los que hablas? Gracias.

emprear · #4 (**permalink**) 06/03/2013, 11:29

Cita:

Iniciado por ananda

El error por el que no funcionaba era porque antes tenía el input de la escuela con name "inputstring" y hace poco lo cambié por "inputstring2" sin modificar la función javascript así que ya está solucionado. Cuales son los otros errores de los que hablas? Gracias.

Que se supone que representa
javascript:cartelmax.className='max'
A falta de más detalles las llamadas a lookup2() y valida2() son errores
corregido lo del inputsring, te recomendaría que utilices un input submit y el evento onsubmit en el form, ya que de esa forma aún ante la deshabilitación de javascript. el form sería accesible. Es recomendable que no utilices, ñ, tildes, etc en los id y nombres decampos

Quedaría asi

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function comprobar2(){ 
if (( document.getElementById("name").value.length==0) || (document.getElementById("surname").value.length==0 ) || (document.getElementById("correo2").value.length==0 ) || (document.getElementById("contrasena").value.length==0) || (document.getElementById("inputString2").value.length==0)){ 
alert('error');
return false; 
}
} 
//]]>
</script>
 
</head>
 
<body>
<form action="creausuarios.php" method="post" id="perfil" name="perfil" onsubmit="return comprobar2();"> 
 <div class="divinput" > 
<input type="text" maxlength="20" id="name" name="name" placeholder="Nombre" class="input" /><br/>
 <input type="text" maxlength="20" id="surname" 
 name="surname" placeholder="Apellidos" class="input"  /><br/>
 <input type="text" maxlength="60" placeholder="Correo electrónico" id="correo2" name="correo2" class="input"  /><br/>
 <input type="password" maxlength="30" placeholder="Contraseña" class="input" id="contrasena" name="contrasena"   /><br/>
 </div> 
 <div> 
 <input type="text" class="selectcolegio" placeholder="Nombre de la escuela" name="selectcolegio" size="30" value="" id="inputString2" />
 </div> 
 <div id="suggestions2"></div> 
<input type="submit" id="reg" name="reg" value="Registrarse" class="botonsubmit"/>
 </form>  
</body>
</html>

Demás está decir que cualquier validación con javascript es insuficiente y poco segura. Solo benef¡ciará la usabilidad por parte del cliente, deberías validar tu form en el servidor, es decir el php
Saludos