Formulario siempre envia

[oNefl0w189]

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:

<form class="formEncuesta" name="formulario" method="post" action="registrar.php">
    <fieldset>
        <legend> * Cuestionario * </legend>
            <ul>
            <li>
                » 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>
            </li>
            <li>
                » 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/> *
            </li>
            <li>
                » 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/> *
            </li>
            <li>
                » 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>
            </li>
            <li>
            <table>
                <tr>
                    <td width="400px">» Evidencias a Favor:</td> 
                    <td width="400px">» Evidencias en Contra: </td>
                </tr>
                <tr>
                    <td width="400px"><textarea name="vp1" id="vp1" placeholder="Evidencias a favor" cols="40" rows="10"></textarea></td> 
                    <td width="400px"><textarea name="vn1" id="vn1" placeholder="Evidencias en contra" cols="40" rows="10"></textarea></td>
                </tr>
            </table>
            </li><br>
            <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>
            <br><br>
    </fieldset>
    <br>
    <input type="submit" value="Enviar">  <input type="reset" value="Limpiar">
    </form>
 

validacion:

Código Javascript:

//  Validacion Numérica
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
 
 
//Campos valoración
 
function validar(campo){ 
var valoracion = document.getElementById(campo);   
if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
valoracion.value = "";
valoracion.focus();
return 0;
}
}
 
 
//Campo pregunta
 
function verificar(campo){
var pregunta = document.getElementById(campo); 
if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
pregunta.value = "";
pregunta.focus();
return 0;
}
 
}
 

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.

[iukaeru]

<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.

[oNefl0w189]

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:

<form class="formEncuesta" name="formulario" method="post" action="javascript:validar();">
    <fieldset>
        <legend> * Cuestionario * </legend>
            <ul>
            <li>
                » 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>
            </li>
            <li>
                » 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/> *
            </li>
            <li>
                » 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/> *
            </li>
            <li>
                » 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>
            </li>
            <li>
            <table>
                <tr>
                    <td width="400px">» Evidencias a Favor:</td> 
                    <td width="400px">» Evidencias en Contra: </td>
                </tr>
                <tr>
                    <td width="400px"><textarea name="vp1" id="vp1" placeholder="Evidencias a favor" cols="40" rows="10"></textarea></td> 
                    <td width="400px"><textarea name="vn1" id="vn1" placeholder="Evidencias en contra" cols="40" rows="10"></textarea></td>
                </tr>
            </table>
            </li><br>
            <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>
            <br><br>
    </fieldset>
    <br>
    <input type="submit" value="Enviar" onclick="this.form.action = 'registrar.php'" >  <input type="reset" value="Limpiar">
    </form>
 

Código Javascript:

function validar(){
 
//  Validacion Numérica
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
 
 
//Campos valoración
 
function validar(campo){ 
var valoracion = document.getElementById(campo);   
if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
valoracion.value = "";
valoracion.focus();
return 0;
}
}
 
 
//Campo pregunta
 
function verificar(campo){
var pregunta = document.getElementById(campo); 
if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
pregunta.value = "";
pregunta.focus();
return 0;
}
 
}
document.formulario.submit();
}
 

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.

[diamari]

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.

[oNefl0w189]

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:

function validar(){
 
//  Validacion Numérica
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
 
 
//Campos valoración
 
function validar(campo){ 
var valoracion = document.getElementById(campo);   
if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
valoracion.value = "";
valoracion.focus();
var erroresv = 1;
}
}
 
 
//Campo pregunta
 
function verificar(campo){
var pregunta = document.getElementById(campo); 
if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
pregunta.value = "";
pregunta.focus();
var erroresp = 1;
}
}
if ((erroresv == 0)&&(erroresp == 0)) {
document.formulario.submit(registrar.php);
}else { alert('hay errores');}
}
 

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... :(

[alexg88]

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

Código HTML:

<form action="registrar.php" class="formEncuesta" name="formulario" method="post" onsubmit="return validar()">
...
</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:

function validar(){
return validar('evaluador1') && validar('evaluador2') && validar('evaluador3') && verificar('pregunta')
}
 
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
 
 
//Campos valoración
 
function validar(campo){ 
var valoracion = document.getElementById(campo);   
if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
valoracion.value = "";
valoracion.focus();
return false;
}
else return true;
}
 
 
//Campo pregunta
 
function verificar(campo){
var pregunta = document.getElementById(campo); 
if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
pregunta.value = "";
pregunta.focus();
return false;
}
else return true;
}
 

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

Saludos.

[oNefl0w189]

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:

<form class="formEncuesta" name="formulario" method="post" onsubmit="return comprobar();" action="registrar.php">
<fieldset>
        <legend> * Cuestionario * </legend>
            <ul>
            <li>
                » 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>
            </li>
            <li>
                » 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/> *
            </li>
            <li>
                » 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/> *
            </li>
            <li>
                » 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>
            </li>
            <li>
            <table>
                <tr>
                    <td width="400px">» Evidencias a Favor:</td> 
                    <td width="400px">» Evidencias en Contra: </td>
                </tr>
                <tr>
                    <td width="400px"><textarea name="vp1" id="vp1" placeholder="Evidencias a favor" cols="40" rows="10"></textarea></td> 
                    <td width="400px"><textarea name="vn1" id="vn1" placeholder="Evidencias en contra" cols="40" rows="10"></textarea></td>
                </tr>
            </table>
            </li><br>
            <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>
            <br><br>
    </fieldset>
    <br>
    <input type="submit" value="Enviar">  <input type="reset" value="Limpiar">
    </form>
 

validador:

Código Javascript:

//  Validacion Numérica
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
 
 
//Campos valoración
 
function validar(campo){ 
var valoracion = document.getElementById(campo);   
if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
valoracion.value = "";
valoracion.focus();
return false;
    }
    else{
    return true;
    }
}
 
 
//Campo pregunta
 
function verificar(campo){
var pregunta = document.getElementById(campo); 
if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
pregunta.value = "";
pregunta.focus();
return false;
    }
    else{
    return true;
    }
}
 
// Validación true o false (enviar o no).
function comprobar(){
return verificar('pregunta') && validar('evaluador1') && validar('evaluador2') && validar('evaluador3');
}
 

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

[diamari]

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.