¿Por qué mi formulario HTML aún se envía cuando devuelvo falso de onsubmit?

Question

me escribió un script sencillo para la forma de la conexión validación de la siguiente manera:

<script type="text/javascript"> 
    function validateLoginForm(){ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 

    if (idV == null || idV == "" || idV.length < 5) { 
      alert("user ID must be filled and of more than 4 characters!!"); 
      id.focus(); 
      return false; 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     alert("Password must be filled and of more than 4 characters!!"); 
     pwd.focus(); 
     return false; 
    } 

    return true; 
} 
</script> 

y llamarlo como:

<form name="LoginForm" method="POST" onsubmit="return validateLoginForm()" action="Login" > 
. 
. 
. 
. 
</form> 

El problema es que el Javascript da un vistazo a la descripción como puedo configurar correctamente pero al final el servlet Login también se llama automáticamente, lo cual es una cosa incorrecta ... ¿Por qué sucede esto? ¿Alguna solución?

Answer 1

El redireccionamiento al inicio de sesión ocurre porque tiene el error js.

No define la variable id y psw.

Así que cuando intenta id.focus() o psw.focus() - usted tiene error de js y regresar true por defecto

por lo que añadir este código:

var id = document.forms["LoginForm"]["id"]; 
var pwd = document.forms["LoginForm"]["pwd"]; 
var idV = document.forms["LoginForm"]["id"].value; 
var pwdV = document.forms["LoginForm"]["pwd"].value; 

Answer 2

probar esto,

<script type="text/javascript"> 
    function validateLoginForm(){ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 
    var err = ''; 
    if (idV == null || idV == "" || idV.length < 5) { 
      err = "user ID must be filled and of more than 4 characters!! \n"; 
      document.getElementById("id").focus() 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     err = "Password must be filled and of more than 4 characters!! \n"; 
     document.getElementById("pwd").focus() 
    } 
    if(err == '') 
     return true; 
    else 
     { 
     alert(err); 
     return false; 
     } 
} 
</script> 

Answer 3

Sin que le pone en todo el contenido de su formulario no puedo estar seguro, pero voy a adivinar aquí. Voy a decir que sus etiquetas para su ID de usuario y campos de contraseña SÓLO tienen atributos de nombre en ellos?

Cuando trabaje con formularios en HTML, debe usar 'name =' para que los nombres de los parámetros pasen al script de recepción. Esto es lo que le da a su script el? Id = blah & pwd = blah bit en la URL o como la carga de datos de la publicación.

Sin embargo ....

Cuando los valores de acceso utilizando el DOM (Document Object Model) que se encuentre en su secuencia de comandos, a continuación, es necesario tener el elemento identificado con una 'id =' atributo.

Lo mismo vale para cualquier elemento en cualquier parte de su documento al que necesite acceder utilizando un enfoque con guiones en js.

Si también lo nota, recibe la alerta, pero además de no devolver el mensaje falso, su llamada de enfoque nunca se invoca, será esto lo que hará que su secuencia de comandos se anule porque un elemento llamado 'id' no puede encontró.

agregue id = "id" e id = "pwd" al lado de sus atributos name = "id" y name = "pwd" en sus etiquetas de entrada, y debería encontrar que todo funcionará como se espera. EG:

<input type="text" name="id" id="id" ... /> 

En una última nota, les animo sin embargo, volver a escribir esta función usando algo como jQuery, encontrará el modelo mucho más intuitivo y amigable plataforma cruzada.

Answer 4

He creado un caso de prueba mínima aquí: http://www.pauldwaite.co.uk/test-pages/7723381/

<script> 
function pretendValidation(){ 
    alert("Validatation failed!"); 
    return false; 
} 
</script> 

<form action="http://www.google.co.uk/" method="POST" onsubmit="return pretendValidation();"> 
    <input type="submit" value="Submit"> 
</form> 

Cuando hago clic en “Enviar”, la alerta pasa, y la forma no se somete. Entonces, en teoría, tu código debería funcionar.

Como @Shawty mentioned, puede tener un problema con el formulario HTML. Si publicas todo el HTML también, podemos verificarlo.

Answer 5

La mejor opción: si se quiere garantizar no para enviar el formulario, incluso si su Javascript lanza en excepción, debe envolver su código en bloques try/catch:

<script type="text/javascript"> 


function validateLoginForm(){ 
    try{ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 

    if (idV == null || idV == "" || idV.length < 5) { 
     alert("user ID must be filled and of more than 4 characters!!"); 
     id.focus(); 
     return false; 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     alert("Password must be filled and of more than 4 characters!!"); 
     pwd.focus(); 
     return false; 
    } 
}catch(e){ 
    console.log(e); 
    return false; 
} 

return true; 
} 
</script> 

Answer 6

Bueno, curiosamente mi formulario todavía se presentó incluso cuando regresé de mi falsefunction y regresó el regreso de esa función a la forma de onsubmit ... incluso intenté:

onsubmit="return false;" 

No está seguro de lo que estaba pasando ... en cualquier caso, moviendo el disparador de evento al submit el evento del botón onclick solucionó el problema.

actualización: acabamos encontrando que el código estaba editando había otro manejador de JS unido a la onsubmit evento por lo que estaba haciendo caso omiso de mi return false;