Foros del Web » Programando para Internet » Javascript »

Funcion valida formulario!

 Estas en el tema de Funcion valida formulario! en el foro de Javascript en Foros del Web. Buenas!! Tengo un problema al validar un formulario, con el evento onsubmit llamo a una funcion que valida los campos y avisa de los que ...
  #1 (permalink)  
Antiguo 24/05/2011, 03:36
 
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
Funcion valida formulario!
Buenas!!

Tengo un problema al validar un formulario, con el evento onsubmit llamo a una funcion que valida los campos y avisa de los que faltan por rellenar o son incorrectos! El problema es que en firefox, chrome y demás navegadores funciona bien, pero si uso el IE al retornar de la funcion de validación recarga la pagina y borra lo que escribe dicha funcion!! Si hay campos sin rellenar muestro unos letreros, pero al recargarse la pagina se borran, solo me ocurre en IE.

El codigo es el siguiente:
Código HTML:
<FORM class="formulario" METHOD="POST" ACTION="save.php" onsubmit="return valida_envia(this); ">
<span id="info">Please fill your details</span>:<br/>
Name: <INPUT TYPE="text" NAME="name" id="input_name">
</FORM>
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.    
  9.        celda = document.getElementById("input_name");
  10.        celda.style.backgroundColor="#ffcc66";
  11.        celda.style.border="2px solid #ff0000";
  12.  
  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. return valid;
  25. }
  26. </script>



Gracias de ante mano. He probado a cambiar el evento onsubmit por un onclick y hacer el submit del formulario en la funcion validar, pero sigue sin funcionar, sigue recargando la pagina :(

Un saludo y gracias!
  #2 (permalink)  
Antiguo 24/05/2011, 06:02
 
Fecha de Ingreso: mayo-2011
Mensajes: 171
Antigüedad: 12 años, 11 meses
Puntos: 32
Respuesta: Funcion valida formulario!
ese es el código completo o es un ejemplo del código por que lo e probado y me va excelente, en ie7+
  #3 (permalink)  
Antiguo 24/05/2011, 07:34
 
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>
  #4 (permalink)  
Antiguo 24/05/2011, 13:00
 
Fecha de Ingreso: febrero-2011
Mensajes: 23
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Funcion valida formulario!
Hola,
Me podriais ayudar?intento hacer esto mismo, pero con el codigo de mi formulario, y me da error...me podeis decir que estoy haciendo mal?
Codigo de mi formulario:
<form id="form1" name="form1" method="post" action="mailto:[email protected]">
<p align="center" class="Estilo7"><span class="Estilo12">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0','width','230','height ','31','src','text2','quality','high','pluginspage ','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgco lor','','movie','text2' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="230" height="31">
<param name="BGCOLOR" value="" />
<param name="movie" value="text2.swf" />
<param name="quality" value="high" />
<embed src="text2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="230" height="31" ></embed>
</object>
</noscript>
</span></p>
<p align="left" class="Estilo7">Nombre
<input type="text" name="textfield4" id="textfield4" />
</p>
<p align="left" class="Estilo7">Apellidos
<input type="text" name="textfield4" id="textfield5" />
</p>
<p align="left" class="Estilo7">E-mail
<input type="text" name="textfield4" id="textfield6" />
</p>
<p align="left" class="Estilo7">Contraseña
<input type="password" name="textfield4" id="textfield7" />
</p>
<p align="left" class="Estilo7">Sexo
<input name="radiobutton" type="radio" class="Estilo7" id="radio" value="radiobutton" />
hombre
<input name="radiobutton2" type="radio" class="Estilo7" id="radio2" value="radiobutton2" />
mujer</p>
<p align="left" class="Estilo7"> Fecha de Nacimiento
<select name="select3" id="select3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="select4" id="select4">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="select5" id="select5">
<option>1940</option>
<option>1941</option>
<option>1942</option>
<option>1943</option>
<option>1944</option>
<option>1945</option>
<option>1946</option>
<option>1947</option>
<option>1948</option>
<option>1949</option>
<option>1950</option>
<option>1951</option>
<option>1952</option>
<option>1953</option>
<option>1954</option>
<option>1955</option>
<option>1956</option>
<option>1957</option>
<option>1958</option>
<option>1959</option>
<option>1960</option>
<option>1961</option>
<option>1962</option>
<option>1963</option>
<option>1964</option>
<option>1965</option>
<option>1966</option>
<option>1967</option>
<option>1968</option>
<option>1969</option>
<option>1970</option>
<option>1971</option>
<option>1972</option>
<option>1973</option>
<option>1974</option>
<option>1975</option>
<option>1976</option>
<option>1977</option>
<option>1978</option>
<option>1979</option>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
</select>
</p>
<p align="left" class="Estilo7"> DNI o T. Residencia
<input type="text" name="textfield5" id="textfield8" />
</p>
<p align="center" class="Estilo7">
<input type="submit" name="button" id="button" value="Regístrate" />
</p>
</form>

Codigo para que no deje enviarlo si falta algun campo por rellenar:
1. <script type="text/javascript">
2. function valida_envia(F){
3.
4. valid=true;
5.
6. //valido el nombre
7. if (F.Nombre.value.length==0){
8. //alert("Tiene que escribir su nombre");
9. celda = document.getElementById("input_Nombre");
10. celda.style.backgroundColor="#ffcc66";
11. celda.style.border="2px solid #ff0000";
12. //F.Nombre.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_Nombre");
21. celda.style.backgroundColor="#FFFFCC";
22. celda.style.border="#FF9933 1px solid";
23. }
24.
25. //valido el apellido
26. if (F.Apellidos.value.length==0){
27. //alert("Tiene que escribir su apellido");
28. celda = document.getElementById("input_Apellidos");
29. celda.style.backgroundColor="#ffcc66";
30. celda.style.border="2px solid #ff0000";
31. //F.Apellidos.focus();
32. valid=false;
33. }
34. else{
35. celda = document.getElementById("input_Apellidos");
36. celda.style.backgroundColor="#FFFFCC";
37. celda.style.border="#FF9933 1px solid";
38. }
39.
40. //valido el E-mail
41. if (F.E-mail.value==0){
42. //alert("Tiene que escribir su e-mail");
43. celda = document.getElementById("input_E-mail");
44. celda.style.backgroundColor="#ffcc66";
45. celda.style.border="2px solid #ff0000";
46. //F.E-mail.focus();
47. valid=false;
48. }
49. else{
50. celda = document.getElementById("input_E-mail");
51. celda.style.backgroundColor="#FFFFCC";
52. celda.style.border="#FF9933 1px solid";
53. }
54.
55. //valido la contraseña
56. if (F.Contraseña.value==0){
57. celda = document.getElementById("input_Contraseña");
58. celda.style.backgroundColor="#ffcc66";
59. celda.style.border="2px solid #ff0000";
60. //F.Contraseña.focus();
61. valid=false;
62. }
63. else{
64. celda = document.getElementById("input_Contraseña");
65. celda.style.backgroundColor="#FFFFCC";
66. celda.style.border="#FF9933 1px solid";
67. }
68. //valido el DNI o T. Residencia
69. if (F.DNI o T. Residencia.value==0){
70. //alert("Tiene que escribir su apellido");
71. celda = document.getElementById("input_DNI o T. Residencia");
72. celda.style.backgroundColor="#ffcc66";
73. celda.style.border="2px solid #ff0000";
74. //F.Sexo.focus();
75. valid=false;
76. }
77. else{
78. celda = document.getElementById("input_DNI o T. Residencia");
79. celda.style.backgroundColor="#FFFFCC";
80. celda.style.border="#FF9933 1px solid";
81. }
82. var checksex=0;
83.
84. celda = document.getElementById("sexm");
85. if(celda.checked)checksex=1;
86. celda = document.getElementById("sexf");
87. if(celda.checked)checksex=1;
88.
89. if(checksex == 0){
90. celda = document.getElementById("vpsex");
91. celda.type="text";
92. valid=false;
93. }
94. else{
95. celda = document.getElementById("vpsex");
96. celda.type="hidden";
97. }
98.
99. //el formulario se envia
100. return valid;
101.
102. }
103. </script>

MUCHAS GRACIAS!
  #5 (permalink)  
Antiguo 24/05/2011, 17:17
 
Fecha de Ingreso: mayo-2011
Mensajes: 171
Antigüedad: 12 años, 11 meses
Puntos: 32
Respuesta: Funcion valida formulario!
cambia la parte de sexo por esto:
Código Javascript: 
Ver original
  1. if(F.sex[0].checked==true||F.sex[1].checked==true) {
  2.         // todo correcto
  3.     } else {
  4.         alert('seleccione su sexo');
  5.         valid=false;
  6.     }

para la próxima trata de que tu código sea menos repetitivo
create una función que cambie de color y mediante un bucle que valla revisando campo por campo.
y esa validación la resumen en 10 lineas

para:
gonfrias19 escribe el código en las etiquetas correspondientes por que así das mas trabajo para probar el código
  #6 (permalink)  
Antiguo 25/05/2011, 04:46
 
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!
Gracias dukeblasspor los consejos y por todo!!
Pero con tu código el IE sigue recargandome la página. Lo hace porque al cambiar el type de la celda y mostrarla. Esto es, la celda que muestro de advertencia al cambiarle el tipo para que se muestre, es lo que recarga lapágina y no se como hacerla aparecer sino, así que tendré que avisar de otro modo.

Es justo en lo que pongo en negrita:

celda = document.getElementById("vpsex");
celda.type="text";

celda = document.getElementById("vpsex");
celda.type="hidden";



Gracias!
Un saludo!!
  #7 (permalink)  
Antiguo 25/05/2011, 05:24
 
Fecha de Ingreso: mayo-2011
Mensajes: 171
Antigüedad: 12 años, 11 meses
Puntos: 32
Respuesta: Funcion valida formulario!
la verdad me bien en ie7
ojo que tenias que cambiar esta parte:
Código Javascript: 
Ver original
  1. //--- esto
  2.   var checksex=0;
  3.  
  4.     celda = document.getElementById("sexm");
  5.     if(celda.checked)checksex=1;
  6.     celda = document.getElementById("sexf");
  7.     if(celda.checked)checksex=1;
  8.     
  9.     if(checksex == 0){
  10.         celda = document.getElementById("vpsex");
  11.         celda.type="text";
  12.         valid=false;
  13.     }
  14.     else{
  15.         celda = document.getElementById("vpsex");
  16.         celda.type="hidden";
  17.     }
  18.     
  19. //---POR ESTA
  20.  
  21. if(F.sex[0].checked==true||F.sex[1].checked==true) {
  22.         // todo correcto
  23.        F.sex[0].type="hidden"; // agregado
  24.         F.sex[1].type="hidden"; // agregado
  25.     } else {
  26.         F.sex[0].type="text"; // agregado
  27.         F.sex[1].type="text"; // agregado
  28.         alert('seleccione su sexo');
  29.         valid=false;
  30.     }


otro, para que vas a cambiar el type, si lo haces ya no validara dado que ya no es un radio, ahora es un txt, tendrías que crear otro validado mas que cuando se convierta eso a text lo valide cosa que no encuentro lógica ?¿

Etiquetas: funcion, 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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:46.