Validación formulario

_cronos · #1 (**permalink**) 23/05/2010, 13:27

Bueno pues como el título dice estoy intentando hacer la validación de un formulario. Pongo aquí el código que uso a ver si podeis ver dónde está el error.

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>Formulario</title>
<style type="text/css">
<!--
.Estilo1 {
    font-family: "Colonna MT";
    color: #FFFFFF;
    font-size: 18px;
}
.Estilo2 {font-size: 18px;}
* {left: 2px;}
body {
    background-color: #000000;
}
 
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div style="background-image:url(http://www.tuswallpapersgratis.com/images/wallpapers/Fuego_Reflejado_1024x768-275502.jpeg);">
 <div class="Estilo1"><h1>Datos</h1></div>
 <noscript>
 <div class="Estilo1" style="text-align:justify; text-align:center;">Si tu navegador es IE, es posible que esté bloqueando algunas partes de la página. Si es así, te saldrá una ventana de aviso de bloqueo de ventanas emergentes. Sólo tienes que hacer click en ella y en 'Permitir contenido bloqueado'.</div>
 </noscript>
  <form id='entrada' action="mailto:[email protected]" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return envio();">
  <input type='hidden' name="Formulario" value="Ikariam ext" />
  <span class="Estilo1">Indica tu:
  </span><br />
  <div class="Estilo1"><ul>
 <li><div class="Estilo1">Nombre:</div></li>
   <input type='text' id='nombre' size="20" /><br /><br /><br />
 <li><div class="Estilo1">Puntuación: </div></li>
   <select id='puntos'>
   <option value="0" selected="selected">0 </option>
   <option value="1-5,000">1-5,000</option>
   <option value="5,001-10,000">5,001-10,000</option>
   <option value="10,001-20,000">10,001-20,000</option>
   <option value="20,001-30,000">20,001-30,000</option>
   <option value="30,001-50,000">30,001-50,000</option>
   <option value="50,001-75,000">50,001-75,000</option>
   <option value="75,001-100,000">75,001-100,000</option>
   <option value="+100,000">+100,000</option>
  </select>
   <br /><br /><br />
 <li><div class="Estilo1">Número de colonias:</div></li>
  <select id='colonias'>
   <option value="0" selected="selected">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="+5">+5</option>
  </select>
  <br /><br />
  <li><div class="Estilo1">Coordenadas:</div></li>
    <fieldset style='width:20%;'>
   <br />&nbsp;<span class="Estilo1">X:</span>
   <input type='text' id='coordenadasx' size='15'/><br /><br /><br />
  <span class="Estilo1">&nbsp;Y:</span>
  <input type='text' id='coordenadasy' size='15' /><br />
 </fieldset><br />
  </ul></div>
  <input type="submit" value="Enviar datos" />   <input type='reset' value="Restablecer datos" />
  </form>
  <span class="Estilo1">&nbsp;Deja aquí tu comentario (1000 carácteres máx.): </span>
  <form action="mailto:[email protected]" method="post" enctype="application/x-www-form-urlencoded" id="comid">
   &nbsp;
   <textarea id="coment" cols='55' rows='17' onkeypress="caract()"></textarea>
   <pre></pre>&nbsp;<input type='text' id='numc' value="1000" size="7" ReadOnly />
   <br /><br />
   &nbsp;<input type='submit' value="Enviar comentario" />  <input type='reset' value="Borrar" />
  </form>
</div>
</body>
</html>

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
   var d = document;
   function envio(){    
    if (document.getElementById('nombre').value.length==0){
      alert("Escribe tu nombre, por favor");
      document.getElementById('nombre').focus();
      return false;
    }else{
    return true;
    }   
 
    if (document.getElementById('coordenadasx').value.length==0){
      alert("Escribe tus coordenadas, por favor");
      document.getElementById('coordenadasx').focus();
      return false;
    }else{
    return true;
    }
    
    if (isNaN(document.getElementById('coordenadasx').value)){
      alert("Escribe un número válido, por favor");
      document.getElementById('coordenadasx').focus();
      return false;
    }else{
    return true;
    }
   
    if (document.getElementById('coordenadasy').value.length==0){
      alert("Escribe tus coordenadas, por favor");
      document.getElementById('coordenadasy').focus();
      return false;
    }else{
    return true;
    }
    
    if (isNaN(document.getElementById('coordenadasy').value)){
      alert("Escribe un número válido, por favor");
      document.getElementById('coordenadasy').focus();
      return false;
    }else{
    return true;
    }
 
    if (document.getElementById('puntos').selectedIndex==0){
      alert("Indica tus puntos, por favor");
      document.getElementById('puntos').focus();
      return false;
    }else{
    return true;
    }
 
    if (document.getElementById('colonias').selectedIndex==0){
      alert("Indica el número de colonias que posees, por favor");      
      document.getElementById('colonias').focus();
      return false;
    }else{
    return true;
    }
    alert("Muchas gracias, tus datos serán enviados");
  }
 function caract(){
  var caracter = d.getElementById('coment').value.length;
  var valor = d.getElementById('numc');
  valor.value = 1000 - caracter;
  if(caracter>=1000){
   alert('Ya has alcanzado los 1000 carácteres, por favor envía este comentario y luego otro nuevo. Gracias.');
   document.getElementById('coment').value = document.getElementById('coment').substring(0,1000)
  } 
 }
</script>

Muchas gracias desde ya,
Saludos (:

dios_kratos · #2 (**permalink**) 23/05/2010, 13:39

me parece k tu problema es mui sencillo, k no dejas de pensar en lo mismo y no hace falta k hagas un formulario pesao xb jaja

_cronos · #3 (**permalink**) 23/05/2010, 13:45

¿Qué dices? Esto es en serio, por favor no gastes bromas a la gente en el foro.

Adler · #4 (**permalink**) 23/05/2010, 13:49

Hola

Es dar palos de ciegos ya que no dices cual es el problema. Tendrías que volver true siempre y cuando se haya superado todas las condiciones

Suerte

_cronos · #5 (**permalink**) 23/05/2010, 13:59

Cierto, lo siento muchísimo, no me di cuenta de decir el problema. Me valida sólo el primer campo, es decir, si no escribo me sale el alert; pero si escribo ya no me valida ninguno más.
Muchas gracias (:

Adler · #6 (**permalink**) 23/05/2010, 14:05

Hola

Es lo que te comentaba, se ha de devolver true cuando se haya superado todas las condiciones, no por cada condición

Suerte

_cronos · #7 (**permalink**) 23/05/2010, 14:09

¿Entonces tengo que quitar el 'return true;' de todas menos del último?
Gracias :D

Adler · #8 (**permalink**) 23/05/2010, 14:27

Hola

Cita:

Iniciado por _cronos

¿Entonces tengo que quitar el 'return true;' de todas menos del último?
Gracias :D

Eso es, solo que has de colocar el último alert delante de return true para que se ejecute

Suerte

_cronos · #9 (**permalink**) 23/05/2010, 14:49

Bueno pues muchísimas gracias, efectivamente era ese el problema. Gracias otra vez.
Saludos (: