Foros del Web » Programando para Internet » Javascript »

Formulario siempre envia

Estas en el tema de Formulario siempre envia en el foro de Javascript en Foros del Web. Bueno, supongo que con el título ya sabréis de que va el tema, el caso es que tengo un formulario, el cual valido con Javascript, ...
  #1 (permalink)  
Antiguo 28/05/2012, 04:15
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Formulario siempre envia

Bueno, supongo que con el título ya sabréis de que va el tema, el caso es que tengo un formulario, el cual valido con Javascript, y como es obvio si la validación no es positiva, no debería enviarse el formulario.

Es decir, que si los campos estan vacios no debería enviarseel form, pero si lo hace.

formulario
Código HTML:
Ver original
  1. <form class="formEncuesta" name="formulario" method="post" action="registrar.php">
  2.     <fieldset>
  3.         <legend> * Cuestionario * </legend>
  4.             <ul>
  5.             <li>
  6.                 » Numero de Pregunta: <input type="number" size="50" min="1" max="90" name="pregunta" id="pregunta" placeholder="Introduce el número de la pregunta" onChange="verificar(this.id);" required/> * <br> <br>
  7.             </li>
  8.             <li>
  9.                 » Nota del Evaluador 1: <input type="number" size="50" min="0" max="100" name="evaluador1" id="evaluador1" placeholder ="Introduce Calificación Evaluador 1" onChange="validar(this.id);" required/> *
  10.             </li>
  11.             <li>
  12.                 » Nota del Evaluador 2: <input type="number" size="50" min="0" max="100" name="evaluador2" id="evaluador2" placeholder ="Introduce Calificación Evaluador 2" onChange="validar(this.id);" required/> *
  13.             </li>
  14.             <li>
  15.                 » Nota del Evaluador 3: <input type="number" size="50" min="0" max="100" name="evaluador3" id="evaluador3" placeholder ="Introduce Calificación Evaluador 3" onChange="validar(this.id);" required/> *<br><br>
  16.             </li>
  17.             <li>
  18.             <table>
  19.                 <tr>
  20.                     <td width="400px">» Evidencias a Favor:</td>
  21.                     <td width="400px">» Evidencias en Contra: </td>
  22.                 </tr>
  23.                 <tr>
  24.                     <td width="400px"><textarea name="vp1" id="vp1" placeholder="Evidencias a favor" cols="40" rows="10"></textarea></td>
  25.                     <td width="400px"><textarea name="vn1" id="vn1" placeholder="Evidencias en contra" cols="40" rows="10"></textarea></td>
  26.                 </tr>
  27.             </table>
  28.             </li><br>
  29.             <li><i>* Solo podrás contestar las preguntas que no hayan sido contestadas. Consulta cual han sido contestadas <a href="contestadas.php" target="blank">AQUÍ</a>.</i></li>
  30.             <br><br>
  31.     </fieldset>
  32.     <br>
  33.     <input type="submit" value="Enviar">  <input type="reset" value="Limpiar">
  34.     </form>

validacion:
Código Javascript:
Ver original
  1. //  Validacion Numérica
  2.  
  3. function validarEntero(input){
  4. return !isNaN(input)&&parseInt(input)==input;
  5. }
  6.  
  7.  
  8. //Campos valoración
  9.  
  10. function validar(campo){
  11. var valoracion = document.getElementById(campo);  
  12. if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
  13. valoracion.value = "";
  14. valoracion.focus();
  15. return 0;
  16. }
  17. }
  18.  
  19.  
  20. //Campo pregunta
  21.  
  22. function verificar(campo){
  23. var pregunta = document.getElementById(campo);
  24. if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
  25. pregunta.value = "";
  26. pregunta.focus();
  27. return 0;
  28. }
  29.  
  30. }


Comprueba varias cosas, entre ellas que el valor no sea "" (es decir, vacío), pero el caso es que, aunque sí que funciona la validación (pues por ejemplo no te deja poner un 0), el formulario se envía si lo dejas vacío.


Que problema hay? Porque se envía si los campos están vacíos? :S
No debería enviarse, para eso le pongo el return 0; (también he probado con return false; y nada..)



Un saludo y muchas gracias compañeros.
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)
  #2 (permalink)  
Antiguo 28/05/2012, 06:03
Avatar de iukaeru  
Fecha de Ingreso: mayo-2012
Mensajes: 127
Antigüedad: 12 años, 5 meses
Puntos: 12
Respuesta: Formulario siempre envia

<form class="formEncuesta" name="formulario" method="post" action="javascript:validar();">

El asunto es que en dicha función (aún no creada por vos) deberás meter todas las validaciones en cuestión y finalizar con una sentencia document.formulario.submit();

Sigue investigando un poco más sobre el tema.
  #3 (permalink)  
Antiguo 28/05/2012, 06:30
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Respuesta: Formulario siempre envia

No se si no te he entendido bien, o no lo estoy haciendo bien, porque la verdad es que no me he aclarado bastante con tu respuesta.

Si no he entendido mal, me comentas que tengo que meter mis otras funciones de validación dentro de una general, la cual termine con un document.formulario.submit(); no?

he echo esto:

Código HTML:
Ver original
  1. <form class="formEncuesta" name="formulario" method="post" action="javascript:validar();">
  2.     <fieldset>
  3.         <legend> * Cuestionario * </legend>
  4.             <ul>
  5.             <li>
  6.                 » Numero de Pregunta: <input type="number" size="50" min="1" max="90" name="pregunta" id="pregunta" placeholder="Introduce el número de la pregunta" onChange="verificar(this.id);" required/> * <br> <br>
  7.             </li>
  8.             <li>
  9.                 » Nota del Evaluador 1: <input type="number" size="50" min="0" max="100" name="evaluador1" id="evaluador1" placeholder ="Introduce Calificación Evaluador 1" onChange="validar(this.id);" required/> *
  10.             </li>
  11.             <li>
  12.                 » Nota del Evaluador 2: <input type="number" size="50" min="0" max="100" name="evaluador2" id="evaluador2" placeholder ="Introduce Calificación Evaluador 2" onChange="validar(this.id);" required/> *
  13.             </li>
  14.             <li>
  15.                 » Nota del Evaluador 3: <input type="number" size="50" min="0" max="100" name="evaluador3" id="evaluador3" placeholder ="Introduce Calificación Evaluador 3" onChange="validar(this.id);" required/> *<br><br>
  16.             </li>
  17.             <li>
  18.             <table>
  19.                 <tr>
  20.                     <td width="400px">» Evidencias a Favor:</td>
  21.                     <td width="400px">» Evidencias en Contra: </td>
  22.                 </tr>
  23.                 <tr>
  24.                     <td width="400px"><textarea name="vp1" id="vp1" placeholder="Evidencias a favor" cols="40" rows="10"></textarea></td>
  25.                     <td width="400px"><textarea name="vn1" id="vn1" placeholder="Evidencias en contra" cols="40" rows="10"></textarea></td>
  26.                 </tr>
  27.             </table>
  28.             </li><br>
  29.             <li><i>* Solo podrás contestar las preguntas que no hayan sido contestadas. Consulta cual han sido contestadas <a href="contestadas.php" target="blank">AQUÍ</a>.</i></li>
  30.             <br><br>
  31.     </fieldset>
  32.     <br>
  33.     <input type="submit" value="Enviar" onclick="this.form.action = 'registrar.php'" >  <input type="reset" value="Limpiar">
  34.     </form>


Código Javascript:
Ver original
  1. function validar(){
  2.  
  3. //  Validacion Numérica
  4.  
  5. function validarEntero(input){
  6. return !isNaN(input)&&parseInt(input)==input;
  7. }
  8.  
  9.  
  10. //Campos valoración
  11.  
  12. function validar(campo){
  13. var valoracion = document.getElementById(campo);  
  14. if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
  15. valoracion.value = "";
  16. valoracion.focus();
  17. return 0;
  18. }
  19. }
  20.  
  21.  
  22. //Campo pregunta
  23.  
  24. function verificar(campo){
  25. var pregunta = document.getElementById(campo);
  26. if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
  27. pregunta.value = "";
  28. pregunta.focus();
  29. return 0;
  30. }
  31.  
  32. }
  33. document.formulario.submit();
  34. }


El caso es que no funciona, como no entendí bien y no funcionan las primeras pruebas, voy a seguir mirando por ahí a ver si encuentro algo...

pero no estaría de más si me encaminas un poco más explicandome mejor..


voy a seguir investigando, Un saludo y gracias compañero.


PD: he hecho más pruebas, como por ejemplo document.formulario.submit(registrar.php); y quitar el onclick="" del boton, pero tampoco.. me marca error en la página.
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)
  #4 (permalink)  
Antiguo 28/05/2012, 07:29
Avatar de diamari  
Fecha de Ingreso: marzo-2012
Mensajes: 95
Antigüedad: 12 años, 7 meses
Puntos: 30
Respuesta: Formulario siempre envia

No se porque no adivinaste lo que hace document.formulario.submit(); ya que plenamente dice sumbit osea someter/enviar. Pero permite que aclare el problema que tienes ahora.

En vez de utilizar el botón de enviar, para enviar tu formulario al la pagina correspondiente, lo utilizas para validar tu formulario con javascript y el javascript (utilizando document.formulario.submit();) se encarga de enviar el formulario.

Por lo tanto document.formulario.submit(); no debe correr a menos que todo no este bien con tu formulario, obviamente. Por lo tanto necesitas incluir un verificación donde si existe un error en el formulario no se activa document.formulario.submit();.

Como lo tienes ahora siempre corre aun sin enviar el formulario.
  #5 (permalink)  
Antiguo 28/05/2012, 08:46
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Respuesta: Formulario siempre envia

Diamari, lo adiviné, pero se me acababa el tiempo en el trabajo y tampoco le pude dar muchas vueltas de cabeza, aunque eso lo suponía no sabía bien su funcionamiento.

La verdad es que verifico si esto funciona o no con el Iexplorer, y me da un asco terrible.. no se cuando funcionan las cosas bien y cuando no! que asco de explorador!

Código Javascript:
Ver original
  1. function validar(){
  2.  
  3. //  Validacion Numérica
  4.  
  5. function validarEntero(input){
  6. return !isNaN(input)&&parseInt(input)==input;
  7. }
  8.  
  9.  
  10. //Campos valoración
  11.  
  12. function validar(campo){
  13. var valoracion = document.getElementById(campo);  
  14. if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
  15. valoracion.value = "";
  16. valoracion.focus();
  17. var erroresv = 1;
  18. }
  19. }
  20.  
  21.  
  22. //Campo pregunta
  23.  
  24. function verificar(campo){
  25. var pregunta = document.getElementById(campo);
  26. if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
  27. pregunta.value = "";
  28. pregunta.focus();
  29. var erroresp = 1;
  30. }
  31. }
  32. if ((erroresv == 0)&&(erroresp == 0)) {
  33. document.formulario.submit(registrar.php);
  34. }else { alert('hay errores');}
  35. }


tengo eso, pero no me funciona... estoy perdidete la verdad.. no se por donde irán los tiros.
Con lo facil que es en php... :(
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)
  #6 (permalink)  
Antiguo 28/05/2012, 09:23
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: Formulario siempre envia

Es sencillo, sólo tienes que poner lo siguiente (fíjate en el return, es imprescindible)

Código HTML:
Ver original
  1. <form action="registrar.php" class="formEncuesta" name="formulario" method="post" onsubmit="return validar()">
  2. ...
  3. </form>

La función validar debe ser una función que devuelva verdadero si se puede enviar el formulario y falso si no.

Ten en cuenta que la función validar que has hecho es incorrecta, no tiene sentido que declares la funciones dentro de la función validar, se tienen que declarar fuera.

Puede ser algo así (lo he hecho rápido así que verificalo):

Código Javascript:
Ver original
  1. function validar(){
  2. return validar('evaluador1') && validar('evaluador2') && validar('evaluador3') && verificar('pregunta')
  3. }
  4.  
  5.  
  6. function validarEntero(input){
  7. return !isNaN(input)&&parseInt(input)==input;
  8. }
  9.  
  10.  
  11. //Campos valoración
  12.  
  13. function validar(campo){
  14. var valoracion = document.getElementById(campo);  
  15. if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
  16. valoracion.value = "";
  17. valoracion.focus();
  18. return false;
  19. }
  20. else return true;
  21. }
  22.  
  23.  
  24. //Campo pregunta
  25.  
  26. function verificar(campo){
  27. var pregunta = document.getElementById(campo);
  28. if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
  29. pregunta.value = "";
  30. pregunta.focus();
  31. return false;
  32. }
  33. else return true;
  34. }

Te paso un enlace que explican algunas cosas de validaciones sencillas: http://www.elcodigo.net/tutoriales/j...vanzado13.html

Saludos.
  #7 (permalink)  
Antiguo 28/05/2012, 12:34
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Respuesta: Formulario siempre envia

Tenia la idea, pero no sabia como llevarla a cabo del todo, pues lo que postee ahí arriba era un intento de la solución que tu me diste alexg88.

He echado un vistazo a la página que me pasaste, esta muy bien, lo explica bien.. aunque quizás de manera muy simple, debería tener algun ejemplo mas complejillo para pillarle bien el truco jejeje, pero me ha aclarado muchas cosas la verdad!

así me ha quedado al final:

formulario
Código HTML:
Ver original
  1. <form class="formEncuesta" name="formulario" method="post" onsubmit="return comprobar();" action="registrar.php">
  2.         <legend> * Cuestionario * </legend>
  3.             <ul>
  4.             <li>
  5.                 » Numero de Pregunta: <input type="number" size="50" min="1" max="90" name="pregunta" id="pregunta" placeholder="Introduce el número de la pregunta" onChange="verificar(this.id);" required/> * <br> <br>
  6.             </li>
  7.             <li>
  8.                 » Nota del Evaluador 1: <input type="number" size="50" min="0" max="100" name="evaluador1" id="evaluador1" placeholder ="Introduce Calificación Evaluador 1" onChange="validar(this.id);" required/> *
  9.             </li>
  10.             <li>
  11.                 » Nota del Evaluador 2: <input type="number" size="50" min="0" max="100" name="evaluador2" id="evaluador2" placeholder ="Introduce Calificación Evaluador 2" onChange="validar(this.id);" required/> *
  12.             </li>
  13.             <li>
  14.                 » Nota del Evaluador 3: <input type="number" size="50" min="0" max="100" name="evaluador3" id="evaluador3" placeholder ="Introduce Calificación Evaluador 3" onChange="validar(this.id);" required/> *<br><br>
  15.             </li>
  16.             <li>
  17.             <table>
  18.                 <tr>
  19.                     <td width="400px">» Evidencias a Favor:</td>
  20.                     <td width="400px">» Evidencias en Contra: </td>
  21.                 </tr>
  22.                 <tr>
  23.                     <td width="400px"><textarea name="vp1" id="vp1" placeholder="Evidencias a favor" cols="40" rows="10"></textarea></td>
  24.                     <td width="400px"><textarea name="vn1" id="vn1" placeholder="Evidencias en contra" cols="40" rows="10"></textarea></td>
  25.                 </tr>
  26.             </table>
  27.             </li><br>
  28.             <li><i>* Solo podrás contestar las preguntas que no hayan sido contestadas. Consulta cual han sido contestadas <a href="contestadas.php" target="blank">AQUÍ</a>.</i></li>
  29.             <br><br>
  30.     </fieldset>
  31.     <br>
  32.     <input type="submit" value="Enviar">  <input type="reset" value="Limpiar">
  33.     </form>

validador:
Código Javascript:
Ver original
  1. //  Validacion Numérica
  2.  
  3. function validarEntero(input){
  4. return !isNaN(input)&&parseInt(input)==input;
  5. }
  6.  
  7.  
  8. //Campos valoración
  9.  
  10. function validar(campo){
  11. var valoracion = document.getElementById(campo);  
  12. if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
  13. valoracion.value = "";
  14. valoracion.focus();
  15. return false;
  16.     }
  17.     else{
  18.     return true;
  19.     }
  20. }
  21.  
  22.  
  23. //Campo pregunta
  24.  
  25. function verificar(campo){
  26. var pregunta = document.getElementById(campo);
  27. if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
  28. pregunta.value = "";
  29. pregunta.focus();
  30. return false;
  31.     }
  32.     else{
  33.     return true;
  34.     }
  35. }
  36.  
  37. // Validación true o false (enviar o no).
  38. function comprobar(){
  39. return verificar('pregunta') && validar('evaluador1') && validar('evaluador2') && validar('evaluador3');
  40. }


Le hice algunos pequeños cambios y le añadí alguna cosilla que le faltaba para dejarle a mi gusto, pero esta prácticamente igual.


Muchísimas gracias a todos por esforzaros en que comprendiese el funcionamiento, he aprendido bastante. :P


Un saludo.


PD: mucho karma os merecéis! jeje
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)
  #8 (permalink)  
Antiguo 28/05/2012, 21:04
Avatar de diamari  
Fecha de Ingreso: marzo-2012
Mensajes: 95
Antigüedad: 12 años, 7 meses
Puntos: 30
Respuesta: Formulario siempre envia

Has intentado algo así:

if(allvalues != '') {
var oculto = document.getElementById('Idcondenv');
//oculto.value = allvalues;
document.miForm.action ='index.html?Idcondenv='+allvalues;
alert(document.miForm.action);
document.miForm.submit()
}

Ahora mismo no tengo como probar como en verdad es enviado pero según el alert se ve bien en chrome y firefox pero IE deja el espacio (si escribes %20 lo deja también). El problema es que no lo coloca en la barra de dirección por eso no se si trabajara.

Etiquetas: envia, formulario, funcion, input, php, siempre
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




La zona horaria es GMT -6. Ahora son las 17:21.