javascript – 返回false时仍然提交Onsubmit

我在使用简单的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;
    }
}

有什么东西真的很明显我错过了吗?我没有以任何方式绑定onsubmit事件,除了你在html表单标签中看到的内容,我也没有为提交按钮分配任何点击处理程序.

我正在使用JQuery mobile可能是相关的,这是否可能与我的表单有关?

如果您想自己处理表单提交,则需要将data-ajax =“false”属性添加到< form>标签让jQuery Mobile不管它.

To prevent form submissions from being automatically handled with
Ajax, add the data-ajax="false" attribute to the form element. You can
also turn off Ajax form handling completely via the ajaxEnabled global
config option.

资料来源: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单独留下一个特定的表单,以便我们可以自己提交.

https://stackoverflow.com/questions/11086692/onsubmit-still-submits-when-returning-false

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 返回false时仍然提交Onsubmit