Foros del Web » Programando para Internet » Javascript »

Mejorar el código

 Estas en el tema de Mejorar el código en el foro de Javascript en Foros del Web. Buenos días, tengo un código que adapte de un ejemplo que encontre por ahí, lo que hace es validar que los campos no esten vacios ...
  #1 (permalink)  
Antiguo 09/06/2010, 07:12
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 22 años
Puntos: 4
Mejorar el código
Buenos días, tengo un código que adapte de un ejemplo que encontre por ahí, lo que hace es validar que los campos no esten vacios y coloca al lado del campo que no se haya completado un * para avisarle al usuario ue debe completarlo, pero el problema es ue lo coloca y de inmediato envía el formulario a la página que esta en el form_action del formulario... en resumen coloca los * pero no me valida sino que envía el formulario... soy nuevo en javascript, y no tengo idea a que se deba. gracias


// script


<script language=javascript>
function validarFormulario(){

var isNotOk;

//validar usuario

var usuario = window.document.validar_formulario.usuario.value;
if (usuario==""){

document.getElementById("iusuario").style.display= "inline";
isNotOk=true;

}
else{

document.getElementById("iusuario").style.display= "none";

}

//validar clave

var clave = window.document.validar_formulario.clave.value;
if (clave==""){

document.getElementById("iclave").style.display="i nline";
isNotOk=true;
}
else{

document.getElementById("iclave").style.display="n one";
}

//validar email

var email = window.document.validar_formulario.email.value;
if (email==""){

document.getElementById("iemail").style.display="i nline";
isNotOk=true;
}
else{

document.getElementById("iemail").style.display="n one";
}


//validar país
var pais = window.document.validar_formulario.pais.value;
if (pais==""){

document.getElementById("ipais").style.display="in line";
isNotOk=true;
}
else{

document.getElementById("ipais").style.display="no ne";
}

if (isNotOk){
return 0;
}

else
{
window.document.validar_formulario.submit();
}


}
</script>



// formlario



<form id="registro" name="validar_formulario" method="post" action="registro.asp">
<table width="32%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="22%">Usuario:</td>
<td width="78%"><input name="usuario" type="text" id="usuario" /></td>
<td>
<div id="iusuario" style="display:none; color:red">&nbsp;*</div>
</td>
</tr>
<tr>
<td>Clave:</td>
<td><input name="clave" type="password" id="clave" /></td>
<td>
<div id="iclave" style="display:none; color:red">&nbsp;*</div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td><input name="email" type="text" id="email" /></td>
<td>
<div id="iemail" style="display:none; color:red">&nbsp;*</div>
</td>
</tr>
<tr>
<td>Pa&iacute;s:</td>
<td><select name="pais" id="pais">
<option selected="selected">Elige...</option>
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cuba">Cuba</option>
<option value="Ecuador">Ecuador</option>
<option value="El Salvador">El Salvador</option>
<option value="Espa&ntilde;a">Espa&ntilde;a</option>
<option value="Guatemala">Guatemala</option>
<option value="Honduras">Honduras</option>
<option value="M&eacute;xico">M&eacute;xico</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Panam&aacute;">Panam&aacute;</option>
<option value="Paraguay">Paraguay</option>
<option value="Per&uacute;">Per&uacute;</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rep&uacute;blica Dominicana">Rep&uacute;blica Dominicana</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select></td>
<td>
<div id="ipais" style="display:none; color:red">&nbsp;*</div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="btnTest" id="btnTest" value="&iexcl;Reg&iacute;strame!" onclick="validarFormulario()"/></td>
</tr>
</table>
</form>

Muchas gracias de antemano
  #2 (permalink)  
Antiguo 09/06/2010, 07:58
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 8 meses
Puntos: 310
Respuesta: Mejorar el código
Esuqe lo tienes al revés.

Código Javascript: 
Ver original
  1. <script language=javascript>
  2. function validarFormulario(){
  3.  
  4. var isNotOk;
  5.  
  6. //validar usuario
  7.  
  8. var usuario = window.document.validar_formulario.usuario.value;
  9. if (usuario==""){
  10.  
  11. document.getElementById("iusuario").style.display= "inline";
  12. isNotOk=true;
  13.  
  14. }
  15. else{
  16.  
  17. document.getElementById("iusuario").style.display= "none";
  18.  
  19. }
  20.  
  21. //validar clave
  22.  
  23. var clave = window.document.validar_formulario.clave.value;
  24. if (clave==""){
  25.  
  26. document.getElementById("iclave").style.display="i nline";
  27. isNotOk=true;
  28. }
  29. else{
  30.  
  31. document.getElementById("iclave").style.display="n one";
  32. }
  33.  
  34. //validar email
  35.  
  36. var email = window.document.validar_formulario.email.value;
  37. if (email==""){
  38.  
  39. document.getElementById("iemail").style.display="i nline";
  40. isNotOk=true;
  41. }
  42. else{
  43.  
  44. document.getElementById("iemail").style.display="n one";
  45. }
  46.  
  47.  
  48. //validar país
  49. var pais = window.document.validar_formulario.pais.value;
  50. if (pais==""){
  51.  
  52. document.getElementById("ipais").style.display="in line";
  53. isNotOk=true;
  54. }
  55. else{
  56.  
  57. document.getElementById("ipais").style.display="no ne";
  58. }
  59.  
  60. if (isNotOk){//esto significa que si la variable isNotOk es true
  61. return 0;//no lo manda
  62. }
  63.  
  64. else//si es false (no es true)
  65. {
  66. window.document.validar_formulario.submit();// lo manda
  67. }
  68.  
  69.  
  70. }
  71. </script>

Tienes que cambiar

Código Javascript: 
Ver original
  1. if (isNotOk){
  2. return 0;
  3. }
  4.  
  5. else
  6. {
  7. window.document.validar_formulario.submit();
  8. }

Por

Código Javascript: 
Ver original
  1. if (isNotOk){
  2. window.document.validar_formulario.submit();
  3. }
  4.  
  5. else
  6. {
  7. return 0;// o false
  8. }

Saludos (:
  #3 (permalink)  
Antiguo 09/06/2010, 10:55
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 22 años
Puntos: 4
Respuesta: Mejorar el código
Gracias por responder, cambie como me dijiste pero igual, marca los * y envía el formulario debería de quedarse allí para completar los campos que faltan.
  #4 (permalink)  
Antiguo 09/06/2010, 11:25
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 22 años
Puntos: 4
Respuesta: Mejorar el código
Empece desde 0 guiándome por el ejemplo (Ya que este funciona pero debía cambiar cosas), y funcionó algo debí haber estado haciendo mal (cuando cambié los nombres de los campos en el script)... muchas gracias de verdad.
  #5 (permalink)  
Antiguo 09/06/2010, 12:18
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 8 meses
Puntos: 310
Respuesta: Mejorar el código
En el form
Código HTML: 
Ver original
  1. <form id="registro" name="validar_formulario" method="post" action="registro.asp">
Pon esto
Código HTML: 
Ver original
  1. <form id="registro" name="validar_formulario" method="post" action="registro.asp" onsubmit='return validarFormulario();'>

Y en el submit
Código HTML: 
Ver original
  1. <input type="submit" name="btnTest" id="btnTest" value="&iexcl;Reg&iacute;strame!" onclick="validarFormulario()"/>
Esto
Código HTML: 
Ver original
  1. <input type="submit" name="btnTest" id="btnTest" value="&iexcl;Reg&iacute;strame!" />

Y dime si te funciona
Saludos (:
  #6 (permalink)  
Antiguo 09/06/2010, 17:11
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 22 años
Puntos: 4
Respuesta: Mejorar el código
Hola, no me funcionó... la verdad creo que modificando el original cambie algo mal, lo volví a adpatar sin modificar mucho y me funcionó, aca le dejo el código para quien lo necesite, me parece bueno.

Código javascript: 
Ver original
  1. <script language=javascript>
  2.  
  3. function validarFormulario(){
  4.  
  5. var isNotOk;
  6.  
  7.  
  8. var usuario = window.document.formValidar.usuario.value;
  9. if (usuario==""){
  10.  
  11. document.getElementById("iusuario").style.display="inline";
  12.  
  13. isNotOk=true;
  14.  
  15. }
  16. else{
  17.  
  18. document.getElementById("iusuario").style.display="none";
  19.  
  20. }
  21.  
  22.  
  23. var clave = window.document.formValidar.clave.value;
  24. if (clave==""){
  25.  
  26. document.getElementById("iclave").style.display="inline";
  27.  
  28. isNotOk=true;
  29. }
  30. else{
  31.  
  32. document.getElementById("iclave").style.display="none";
  33. }
  34.  
  35.  
  36. var email = window.document.formValidar.email.value;
  37. if (email==""){
  38.  
  39. document.getElementById("iemail").style.display="inline";
  40.  
  41. isNotOk=true;
  42. }
  43. else{
  44.  
  45. document.getElementById("iemail").style.display="none";
  46. }
  47.  
  48.  
  49.  
  50. var pais = window.document.formValidar.pais.value;
  51. if (pais==""){
  52.  
  53. document.getElementById("ipais").style.display="inline";
  54.  
  55. isNotOk=true;
  56. }
  57. else{
  58.  
  59. document.getElementById("ipais").style.display="none";
  60. }
  61.  
  62. if (isNotOk){
  63. return 0;
  64.  
  65.  
  66. }
  67. else{
  68. window.document.formValidar.submit();
  69. }
  70.  
  71.  
  72.  
  73. }
  74. </script>
  75.  
  76. <form id="registro" name="formValidar" method="post" action="registro.asp">
  77.  
  78. <table align="center" cellpadding="5" cellspacing="0">
  79.  
  80. <tr>
  81. <td>Usuario:</td>
  82. <td>
  83. <input name="usuario" type=text id="usuario" maxlength=20></td>
  84. <td>
  85. <div id="iusuario" style="display:none; color:red">&nbsp;*</div></td>
  86. </tr>
  87. <tr>
  88. <td>Clave:</td>
  89. <td>
  90. <input name="clave" type=password id="clave" maxlength=20></td>
  91. <td>
  92.  
  93. <div id="iclave" style="display:none; color:red">&nbsp;*</div></td>
  94. </tr>
  95. <tr>
  96. <td>Email:</td>
  97. <td>
  98. <input name="email" type=text id="email" maxlength=50></td>
  99. <td>
  100.  
  101. <div id="iemail" style="display:none; color:red">&nbsp;*</div></td>
  102. </tr>
  103.  
  104. <tr>
  105.   <td>Pa&iacute;s:</td>
  106.   <input name="pais" type=text id="pais" maxlength=50></td> </td>
  107.   <td><div id="ipais" style="display:none; color:red">&nbsp;*</div></td>
  108. </tr>
  109. <tr>
  110.   <td>&nbsp;</td>
  111. </tr>
  112. <tr>
  113. </tr>
  114.  
  115. <tr><td>
  116. <input type=button name=btnTest id=btnTest value=Enviar onClick="validarFormulario()">
  117. </tr></td>
  118. </table>

Etiquetas: mejoras
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 21:19.