返回 false 时，提交仍会提交

Onsubmit still submits when returning false

本文关键字：提交 false 返回      更新时间：2023-09-26

我在制作一个简单的 html 登录页面时遇到了问题，当我使用无效凭据提交登录表单时，表单仍然提交，即使我的验证方法正在执行"return false"命令。我知道这个问题在这里被问了很多次，但这些问题的答案都没有帮助我。

我的 html 表单如下：

<form onSubmit="return validateForm();" method="get" action="TestPage.html">
    <div id="centralPoint" class="frame">
        <select id="centralPointSelect" data-inline="true" data-mini="true" data-native-menu="false" name="centralPoint"></select>
    </div>
    <div id="credentialsFrame" class="frame">
        <input id="userField" type="text" name="Username" />
        <input id="passField" type="password" name="Password" />
    </div>
    <div id="errorMsg"></div>
    <input id="loginBtn" type="submit" value="Login" />
    <div id="rememberMe" class="frame">
        <input type="checkbox" id="checkbox-1" class="custom" data-mini="true" name="rememberMe" />
        <label for="checkbox-1">Keep me signed in</label>
    </div>
    <div id="forgotPassFrame">
        <input id="forgotPass" type="button" data-mini="true" value="Forgot password?" />
    </div>
</form>

这是我的javascript方法。请注意，即使这里唯一的代码行是"return false";表单仍然会提交。我还检查了 firebug，以确保该方法确实被调用并且它确实返回了 false，并且这一切都检查出来了。

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;
    }
}

我错过了什么非常明显的东西吗？除了您可以在 html 表单标签中看到的方式之外，我没有以任何方式绑定 onsubmit 事件，也没有为提交按钮分配任何单击处理程序。

我正在使用JQuery移动版可能与此相关，这是否有可能对我的表单起作用？

如果你想自己处理表单提交，你需要将data-ajax="false"属性添加到<form>标签中，这样jQuery Mobile就不会管它了。

防止表单提交被自动处理 Ajax，将 data-ajax="false" 属性添加到表单元素。您可以 同时通过 ajaxEnabled 全局完全关闭 Ajax 表单处理 配置选项。

来源： http://jquerymobile.com/demos/1.1.0/docs/forms/forms-sample.html

这是表单的演示，但添加了上述属性：http://jsfiddle.net/XtMw9/

这样做意味着您必须手动提交表单：

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); }
    });
}

解释

这是有效的，因为默认情况下jQuery Mobile将尝试通过AJAX提交任何表单。使用 data-ajax="false" 属性，我们可以告诉 jQuery Mobile 保留特定的表单，以便我们可以自己提交。

在validateForm（）函数中，你使用了两个未定义的变量（userLbl和passLbl）。定义变量的值并进行检查。

相关文章：