Mi propósito: si el campo de usuario y el campo de contraseña están en blanco, quiero dejar de enviar el formulario. Este es mi código que estoy intentando:
<!DOCTYPE html> <html> <head> <script> function doit() { var usr = document.getElementById('ur').value; var psw = document.getElementById('pw').value; if ((usr.trim() == '') && (psw.trim() == '')) { alert("cannot Submit form"); return false; } } </script> </head> <body> <form action="post.php" method="post" onsubmit="doit()"> User: <input type="text" id="ur" name="user"> <br> <br> Pass: <input type="password" id="pw" name="pass"> <br> <br> <button>Submit</button> </form> </body> </html>Estoy aprendiendo JavaScript. Será útil si corrige el código con una pequeña explicación de por qué no funciona.
return false funciona bien, la forma en que está llamando a esa función es incorrecta.
<form action="post.php" method="post" onsubmit="doit()">Simplemente lo llama, no hace nada con el valor devuelto.
<form action="post.php" method="post" onsubmit="return doit()"> ^Detendrá la publicación del formulario en un valor devuelto falso.
Lea esta nota en MSDN aunque no es específica de IE
Puede anular este evento devolviendo falso en el controlador de eventos. Utilice esta capacidad para validar datos en el lado del cliente para evitar que se envíen datos no válidos al servidor. Si el controlador de eventos es llamado por el atributo onsubmit del objeto de formulario, el código debe solicitar explícitamente el valor de retorno mediante la función de devolución, y el controlador de eventos debe proporcionar un valor de retorno explícito para cada ruta de código posible en la función del controlador de eventos .
Ahora en otro punto importante.
Su condición if solo detendrá el envío del formulario cuando ambos campos estén en blanco, mientras que debería hacerlo incluso si cualquiera de esos dos campos está en blanco. Ese && (Y) debería ser un || (O), y al final de sus funciones, si nada devolvió falso, return true entonces.
El evento onsubmit acepta valores booleanos, ya que no está devolviendo nada, por lo que se supone que es verdadero de forma predeterminada. Debe agregar retorno en este evento explícitamente como se menciona a continuación:
cambio
onsubmit="doit()">para
onsubmit="return doit()">Usando addEventListener al enviar con preventDefault()
document.form1.addEventListener( "submit", function(event) { var user = this.querySelector("input[name=user]").value; // this = object of form1 var pass = this.querySelector("input[name=pass]").value; if ( (user.trim() == "") || (pass.trim() == "") ) { alert("cannot Submit form"); event.preventDefault(); } else { alert("submit"); } } ); <form action="" method="post" name="form1" > Username: <input type="text" name="user" /><br><br> Password: <input type="password" name="pass" /><br><hr> <input type="submit" value="Submit" /> </form>