Validar formulario

Wickedalone · #1 (**permalink**) 23/11/2009, 01:04

hola quisiera que me ayudaran con un problema que tengo,
la verdad no se como hacerle, quiero validar un formulario pero al momento de meter mis funciones que son estas

Código:

function campo1(){
	if (formulario.alias.value.length < 3) {
		alert("Escriba por lo menos 1 Nombre");
		formulario.alias.focus();}

}  

function cuenta(){
	if(formulario.contraseña.value.length < 4){
		alert("La contraseña debe contener minimo 4 Caracteres");
		formulario.contraseña.focus();}
		return(false);
}
function campo2(){      
    if (formulario.contraseña.value != formulario.confirmar_contraseña.value){ 
       alert("Las contraseñas no coinciden");
	   formulario.confirmar_contraseña.value="";
	   formulario.confirmar_contraseña.focus();}  	
}

en el validar.js, el formulario me crea un error de alertas que no tienen fin el codigo del formulario es el siguiente:

Código HTML:

<html >
<head>
<script  language="javascript" src="validar.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FORMULARIO</title>
</head>

<body>
<form id="formulario" name="formulario" method="post" >
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <table width="473" border="8" align="center" bordercolor="#FF0000"  bgcolor="#FFFF00">
    <tr>
      <td><label>
      <div align="center"><span class="Estilo4">ALIAS</span></div>
      </label></td>
      <td><input name="alias" type="text"  maxlength="15" onblur="campo1()"/></td>
    </tr>
    <tr>
      <td><label><div align="center"><span class="Estilo4">CONTRASEÑA</span></div></label></td>
      <td><input name="contraseña" type="password"  maxlength="15" onblur="cuenta()"/></td>
    </tr>
    <tr>
      <td><label><div align="center"><span class="Estilo4">CONFIRMAR CONTRASEÑA</span></div></label></td>
      <td><input name="confirmar_contrase&ntilde;a" type="password"  maxlength="15" onblur="campo2()"  /></td>
    </tr>
	
</table>
  <p align="center">
    <input type="submit" name="Submit" value="Enviar" />
 
</body>
</html>

espero y me puedan ayudar y entiendan mi pregunta gracias

caricatos · #2 (**permalink**) 23/11/2009, 03:05

Hola:

La alerta es porque antes del fin del body (</body>) debe haber un fin de form (</form>)...

Saludos

Wickedalone · #3 (**permalink**) 23/11/2009, 17:10

ok muchas gracias por el aporte pero si tengo la etiqueta </form> y sigo teniendo el mismo error, pero muchas gracias

zerokilled · #4 (**permalink**) 23/11/2009, 17:58

el problema es la referencia al formulario. en tus funciones utilizas una supuesta variable llamada formulario pero este no esta definido. para obtener la referencia del formulario por ID utiliza el metodo getElementById.

un consejo. evita mover el foco de los campos con focus. en algunos navegadores, como iexplorer, terminaras en un bucle infinito cuando el valor del campo no coincide con los criterios.

crujikoki · #5 (**permalink**) 25/11/2009, 01:34

Hola,

No respondí a este post por que por mucho que intentaba solucionar lo del bucle infinito que le aparece no lo conseguía. Vi que le faltaban un par de tags por cerrar pero eso no era el motivo.

Pero la última respuesta me ha impactado bastante. zerokilled, dónde usa la "variable" formulario??? Que es lo que tiene que definir??? A lo mejor no te he entendido bien lo que has querido decir, pero a mi me da la impresión de que hay alguna confusión de por medio... Me lo puedes aclarar???

Saludos.

caricatos · #6 (**permalink**) 25/11/2009, 02:23

Hola:

Los acostumbrados a diseñar sólo para explorer saben que un elemento con id="formulario", pueden referenciarlo en javascript como la variable formulario, y eso es lo que se aprecia en el código, cuando al menos habría que crear un alias o algo así.
formulario = document.getElementById("formulario")

Supongo que zerokilled

, ha pensado en lo mismo.

Saludos

zerokilled · #7 (**permalink**) 25/11/2009, 02:32

realmente no hay ninguna variable, pero dependiendo el navegador, este considera los elementos con ID como variables creadas. por ejemplo, el formulario tiene id formulario. si intentas hacer alert(formulario) mostrara en pantalla object aun cuando nosotros no hayamos definido dicha variable. es una practica poco util porque el unico navegador que hace tal cosa es iexplorer. por tanto, la forma correcta y estandar es usando el metodo getElementById() pasandole a este como parametro el id.

@edit,
chasme, no habia visto tu respuesta caricatos. y si, a eso mismo me referia.

Wickedalone · #8 (**permalink**) 25/11/2009, 19:02

Muchas gracias por responder a mi pregunta, la verdad no pude validar el formulario mejor opte por otra opcion asi que aqui les dejo el codigo que me resulto mas facil validar de antemano muchisisismas gracias.

Código:

function validar()
{
  var alias=document.getElementById("alias").value;
  var at=document.getElementById("contrasena").value;
  var at2=document.getElementById("contrasena2").value;
  var nom=document.getElementById("nombre").value;
  var ap_pat=document.getElementById("ap_pat").value;
  var ap_mat=document.getElementById("ap_mat").value;
  var nac=document.getElementById("dateArrival").value;
  var correo=document.getElementById("email").value.indexOf("@");
  
  if (alias.length<=2) {
     alert("Es obligatorio indicar un Alias");
     cyberflog.alias.focus();
	 return false;
  }

  if (at.length <=3) {
     alert("contraseña debe de tener por lo menos 4 caracteres");
	 cyberflog.contrasena.focus();
     return false;
  }
  
  if(at!=at2){
     alert("Las contraseñas no coinciden");
	 cyberflog.contrasena2.value="";
	 cyberflog.contrasena2.focus();
     return false;
  }
  
  if (nom.length <=2) {
     alert("Es obligatorio indicar un Nombre");
     cyberflog.nombre.focus();
	 return false;
  }
	 
  if (ap_pat.length<=2) {
     alert("Es obligatorio indicar Apellido Paterno");
     cyberflog.ap_pat.focus();
	 return false;
 }
	 
  if (ap_mat.length<=2) {
     alert("Es obligatorio indicar Apellido Materno");
     cyberflog.ap_mat.focus();
	 return false;
 }
 
 if (nac.length==0) {
     alert("Ingresa tu Fecha de Nacimiento");
     cyberflog.fecha_nacimiento.focus();
	 return false;
 }
	 
  if (correo==-1) {
     alert("Dirección de correo electrónico no válida");
	 cyberflog.email.focus();
     return false;
  }
  
}

y el formulario

Código HTML:

<html>
<head>
<title>FORMULARIO</title>
<script language="javascript" src="popcalendar.js"></script>
<script language="javascript" src="validar.js"></script>
</head>
<body>
 
 
<form name="cyberflog"  action="altausuario.php" onSubmit="return validar()">
	  <p>&nbsp;</p>
	  <table width="368" border="5" align="center" bordercolordark="#000000" bgcolor="#999999">
	  <tr>
	  		<td>
  Alias: 
      </td>
	  		<td>
	  <input type="text" id="alias" s name="alias" />
	  		</td>
	  
	  </tr>
      <tr>
	  		<td>  
	  contraseña:
	  		</td>
	  		<td> 
	  <input  type="password" id="contrasena"  name="contrasena" />
	  		</td>
	  </tr>
	  <tr>
	  		<td>  
	  Repetir Contraseña:
	  		</td>
	  		<td> 
	  <input  type="password" id="contrasena2"  name="contrasena2"/> 
	  		</td>
	  </tr>
	  <tr>
	  		<td>  
	  Nombre:
	  		</td>
	  		<td> 
	  <input  type="text" id="nombre"  name="nombre"/>
	  		</td>
	  </tr>
	  <tr>
	  		<td>  
	  Apellido Paterno:
	  		</td>
	  		<td> 
	  <input  type="text" id="ap_pat"  name="ap_pat"/>
	  		</td>
	  </tr>
	  <tr>
	  		<td>  
	  Apellido Materno:
	  		</td>
	  		<td> 
	  <input  type="text" id="ap_mat"  name="ap_mat"/> 
	  		</td>
	  </tr>
	  <tr>
	  		<td>  
	  Sexo:
	  		</td>
	  		<td> 
	  <select name="sexo" id="sexo">
        <option selected="selected" >femenino</option>
        <option>masculino</option>
              </select> 
	  		</td>
	  </tr>
	  <tr>
	  		<td>  
	  Fecha de Nacimiento:
	  		</td>
	  		<td> 
	 <input name="fecha_nacimiento" type="text" id="dateArrival" onClick="popUpCalendar(this,cyberflog.dateArrival, 'yyyy-mm-dd');"  readonly="true"> 
	  		</td>
	  </tr>
	  <tr>
	  		<td>
		E-mail:
			</td>
			<td>
			<input type="text" id="email"  name="email" size="15"/>
			<select name="htl" id="htl">
				 <option selected="selected"> hotmail.com</option>
				 <option > yahoo.com</option>
				 <option > gmail.com</option>
			</select>
			</td>
		</tr>
  </table>
      <div align="center"><br />
        <input type="submit" value="ENVIAR"  />
        <input type="reset" name="Submit" value="LIMPIAR" />
      </div>
</form>
 
</body>
</html>

BYE Y GRACIAS POR TODO

crujikoki · #9 (**permalink**) 27/11/2009, 01:59

Siento seguir con el tema pero es que no lo entiendo... Vamos a ver:

Me estais diciendo que si yo me creo un formulario y le pongo de id "formulario" habrá conflicto con una variable que nadie ha creado y que se llama formulario???

Creo que nunca me he encontrado con este caso pro que creo que nunca le he puesto "formulario" a ningua ID... Sieno si soy pesado pero quiero que me quede claro el concepto del problema!

Me lo podeis aclarar un poco más? Si puede ser, cuanto más básica sea la explicación mejor!

Saludos y gracias de antemano.

zerokilled · #10 (**permalink**) 27/11/2009, 02:19

Cita:

Me estais diciendo que si yo me creo un formulario y le pongo de id "formulario" habrá conflicto con una variable que nadie ha creado y que se llama formulario???

tecnicamente es correcto. habra conflicto porque es algo que solo hace iexplorer. el elemento en particular no importa. sucede que el estandar no indica que los IDs deben ser variables en javascript. eso fue algo que inicialmente se invento microsoft. lo curioso es que los navegadores actuales (firefox, safari 4/win32, chrome2, netscape9, flock, opera10) tambien crean dichas variables, quizas lo hicieron asi para adaptarse a los programadores que tienen esa costumbre. si por ejemplo vez la consola de errores en navegadores basados en gecko (firefox, netscape, flock) veras que te indica el siguiente aviso.

Cita:

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.

puedes intentar el siguiente codigo en diferentes navegadores, y de paso verifica la consola de errores en los navegadores, no todos te marcaran el aviso.

Código:

<div id="elementodiv"></div>
<script>
alert(elementodiv);
</script>

el problema se puede hacer mayor si los fabricantes de navegadores deciden no soportar dicha tecnica.

edit @ 3:28 DST -5 GMT,
me olvide añadir, el problema se hace mas evidente cuando el documento se analiza con algun DOCTYPE. mira por ejemplo que sucede en firefox cuando cargas el siguiente documento, pero sorprendentemente en otros navegadores si funciona, incluyendo flock y netscape.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
onload = function(){
alert(who)
}
</script>
<style type='text/css'>

</style>
</head>

<body>
<div id="who"></div>
</body></html>

el alerta no se muestra y la consola de error solo dice que la variable who no esta definida. o sea, esta vez no te avisa que la forma estandar es con getElementById. por eso nunca es aconsejable utilizar los IDs como variables sin definir.

crujikoki · #11 (**permalink**) 30/11/2009, 06:21

Hola,

Pues no lo sabía! Quizás no me he dado cuenta nunca por que solo he usado el IE... De todos modos, para evitar el conflicto con el ID, simplemente haciendo referencia al objeto con el getElementByID() se deshace el conflicto no?

var formulario = getElementByID("formulario");

Al hacer eso, me imagino que lo que estás haciendo es forzar que el elemento sea la definición de la variable formulario. O no lo estoy entendiendo?

zerokilled · #12 (**permalink**) 30/11/2009, 07:16

Cita:

De todos modos, para evitar el conflicto con el ID, simplemente haciendo referencia al objeto con el getElementByID() se deshace el conflicto no?

es correcto. lo que realmente sucede es que se sobreescribe la variable que el navegador crea por nuestra referencia tomada con getElementById.

crujikoki · #13 (**permalink**) 01/12/2009, 02:21

Hola,

Pues muchas gracias por el tutorial! Una cosa más que se.

Saludos.