Onsubmit aún se envía al devolver falso

Tengo un problema con una página simple de inicio de sesión html que hice, donde cuando envío el formulario de inicio de sesión con credenciales no válidas, el formulario aún envía, aunque mi método de validación está ejecutando el comando “return false”. Sé que esta pregunta se ha hecho muchas veces aquí, pero ninguna de las respuestas a esas preguntas me ha ayudado.

Mi formulario html es el siguiente:

Y aquí está mi método javascript. Tenga en cuenta que incluso si la única línea de código aquí es “return false;” el formulario aún se envía. También he comprobado Firebug para asegurarme de que el método realmente se está llamando y que, de hecho, es falso y todo se soluciona.

 function validateForm() { var usernameTxt = $("#userField").attr("value"); var passwordTxt = $("#passField").attr("value"); if (usernameTxt == "" || passwordTxt == "" || (usernameTxt == userLbl && passwordTxt == passLbl)) { $("#errorMsg").html("Please enter a username and password."); return false; } } 

¿Hay algo realmente obvio que me estoy perdiendo? No estoy vinculando el evento onsubmit de ninguna otra manera que no sea lo que puede ver en la etiqueta de formulario html, ni estoy asignando ningún manejador de clics al botón Enviar.

Podría ser relevante que esté usando JQuery Mobile, ¿es posible que esto esté haciendo algo con mi formulario?

Si desea manejar el envío de formularios por su cuenta, deberá agregar el atributo data-ajax="false" a la etiqueta

para que jQuery Mobile lo deje en paz.

Para evitar que los envíos de formularios se manejen automáticamente con Ajax, agregue el atributo data-ajax="false" al elemento de formulario. También puede desactivar completamente el manejo de formularios Ajax a través de la opción de configuración global ajaxEnabled.

Fuente: http://jquerymobile.com/demos/1.1.0/docs/forms/forms-sample.html

Aquí hay una demostración de su formulario pero con el atributo anterior agregado: http://jsfiddle.net/XtMw9/

Hacer esto significa que tendrá que enviar su formulario manualmente:

 function validateForm() { var usernameTxt = $("#userField").val(); var passwordTxt = $("#passField").val();//notice the use of .val() instead of .attr() if (usernameTxt == "" || passwordTxt == "" || (usernameTxt == userLbl && passwordTxt == passLbl)) { $("#errorMsg").html("Please enter a username and password."); return false; } var $form = $('form'); $.ajax({ url : $form.attr('action'), type : $form.attr('method'), data : $form.serialize(), success : function (response) { ... }, error : function (a, b, c) { console.log(b); } }); } 

Explicación

Esto funciona porque, de forma predeterminada, jQuery Mobile intentará enviar cualquier formulario a través de AJAX. Usando el atributo data-ajax="false" podemos decirle a jQuery Mobile que deje un formulario específico solo para que podamos enviarlo por nuestra cuenta.

En la función validateForm (), ha utilizado dos variables indefinidas ( userLbl y passLbl ). Definir el valor para las variables y verificar.