Ver Mensaje Individual
  #3 (permalink)  
Antiguo 24/05/2011, 07:34
pier2384
 
Fecha de Ingreso: septiembre-2008
Ubicación: a medio camino, entre ninguna parte y el olvido
Mensajes: 68
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: Funcion valida formulario!

Totalmente correcto dukeblass, lo siento, omiti algún campo porque son casi iguales todos, tipo text o select, menos uno tipo radio que es donde falla. Pero no entiendo el porqué!!
Falla en el input "sex" que es de tipo radio, si omito en la funcion javascript "valida_envia(F)" la parte en la que compruebo el campo sex, entonces IE no me recarga la página y funciona correctamente.

Ahora pongo el código completo:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. function valida_envia(F){
  3.  
  4.     valid=true;
  5.  
  6.     //valido el nombre
  7.     if (F.name.value.length==0){
  8.        //alert("Tiene que escribir su nombre");    
  9.        celda = document.getElementById("input_name");
  10.        celda.style.backgroundColor="#ffcc66";
  11.        celda.style.border="2px solid #ff0000";
  12.        //F.name.focus();
  13.        celda2 = document.getElementById("info");
  14.        celda2.style.color="#cc0000";
  15.        celda2.style.fontWeight="bold";
  16.        celda2.style.fontSize="18px";
  17.        valid=false;
  18.     }
  19.     else{
  20.        celda = document.getElementById("input_name");
  21.        celda.style.backgroundColor="#FFFFCC";
  22.        celda.style.border="#FF9933 1px solid";
  23.     }
  24.    
  25.     //valido el apellido
  26.     if (F.surname.value.length==0){
  27.        //alert("Tiene que escribir su apellido");
  28.        celda = document.getElementById("input_surname");
  29.        celda.style.backgroundColor="#ffcc66";
  30.        celda.style.border="2px solid #ff0000";
  31.        //F.surname.focus();
  32.        valid=false;
  33.     }
  34.     else{
  35.        celda = document.getElementById("input_surname");
  36.        celda.style.backgroundColor="#FFFFCC";
  37.        celda.style.border="#FF9933 1px solid";
  38.     }
  39.    
  40.     //valido el país
  41.     if (F.country.value==0){
  42.        //alert("Tiene que escribir su país");
  43.        celda = document.getElementById("input_country");
  44.        celda.style.backgroundColor="#ffcc66";
  45.        celda.style.border="2px solid #ff0000";
  46.        //F.country.focus();
  47.        valid=false;
  48.     }
  49.     else{
  50.        celda = document.getElementById("input_country");
  51.        celda.style.backgroundColor="#FFFFCC";
  52.        celda.style.border="#FF9933 1px solid";
  53.     }
  54.    
  55.     //valido el mes
  56.     if (F.BirthMonth.value==0){
  57.        celda = document.getElementById("input_month");
  58.        celda.style.backgroundColor="#ffcc66";
  59.        celda.style.border="2px solid #ff0000";
  60.        //F.surname.focus();
  61.        valid=false;
  62.     }
  63.     else{
  64.        celda = document.getElementById("input_month");
  65.        celda.style.backgroundColor="#FFFFCC";
  66.        celda.style.border="#FF9933 1px solid";
  67.     }
  68.     //valido el dia
  69.     if (F.BirthDay.value==0){
  70.        //alert("Tiene que escribir su apellido");
  71.        celda = document.getElementById("input_day");
  72.        celda.style.backgroundColor="#ffcc66";
  73.        celda.style.border="2px solid #ff0000";
  74.        //F.surname.focus();
  75.        valid=false;
  76.     }
  77.     else{
  78.        celda = document.getElementById("input_day");
  79.        celda.style.backgroundColor="#FFFFCC";
  80.        celda.style.border="#FF9933 1px solid";
  81.     }
  82.     //valido el año
  83.     if (F.BirthYear.value==0){
  84.        //alert("Tiene que escribir su apellido");
  85.        celda = document.getElementById("input_year");
  86.        celda.style.backgroundColor="#ffcc66";
  87.        celda.style.border="2px solid #ff0000";
  88.        //F.surname.focus();
  89.        valid=false;
  90.     }
  91.     else{
  92.        celda = document.getElementById("input_year");
  93.        celda.style.backgroundColor="#FFFFCC";
  94.        celda.style.border="#FF9933 1px solid";
  95.     }
  96.    
  97.     var checksex=0;
  98.  
  99.     celda = document.getElementById("sexm");
  100.     if(celda.checked)checksex=1;
  101.     celda = document.getElementById("sexf");
  102.     if(celda.checked)checksex=1;
  103.    
  104.     if(checksex == 0){
  105.         celda = document.getElementById("vpsex");
  106.         celda.type="text";
  107.         valid=false;
  108.     }
  109.     else{
  110.         celda = document.getElementById("vpsex");
  111.         celda.type="hidden";
  112.     }
  113.    
  114.     //el formulario se envia
  115.     return valid;
  116.  
  117. }
  118. </script>

Y el formulario:
Código HTML:
<FORM class="formulario" METHOD="POST" ACTION="save.php" onsubmit="return valida_envia(this); " style="text-align:center">
<span id="info">Please fill your details</span>:<br/>
					
Name: <INPUT TYPE="text" NAME="name" id="input_name"><br/>
					
Surname: <INPUT TYPE="text" NAME="surname" id="input_surname"><br/>					
					
Gender:	
Male <input type="radio" name="sex" value="male" id="sexm">
Female <input type="radio" name="sex" value="female" id="sexf"><br/>

<input type="hidden" style="background-color:#FF3300;color:#FFFFFF;text-align:center;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin-bottom:10px;" value="Gender is a required field!" id="vpsex"/><br/>
					
Birth date: <select name="BirthMonth" style="width:110px;" id="input_month">
<option value="0">Month</option>
<option value="1">January</option>
</select>
   													
<select name="BirthDay"  style="width:70px;" id="input_day">
<option value="0">Day</option>
<?php
for ($i=1; $i<=31; $i++)
{
echo "<option value='$i'>$i</option>";
}
?>
</select>

<select name="BirthYear"  style="width:78px;" id="input_year">
<option value="0">Year</option>
<?php
for ($i=2011; $i>=1900; $i=$i-1)
{ 
echo "<option value='$i'>$i</option>";
}
?>
</select><br/><br/>

Country: <select NAME="country" id="input_country" style="width:267px;">
<option value="0" selected="selected">Select Country</option> <option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>		
								
<br/><br/><br/>
<input type="hidden" name="test" />
<input type="submit"  value="Next »" name="enviar">

					
			
</FORM>