Onsubmit 返回 false 时仍然提交 [英] Onsubmit still submits when returning false

问题描述

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

我的html表单如下:

<div id="centralPoint" class="frame"><select id="centralPointSelect" data-inline="true" data-mini="true" data-native-menu="false" name="centralPoint"></select>

<div id="credentialsFrame" class="frame"><input id="userField" type="text" name="用户名"/><input id="passField" type="password" name="密码"/>

<div id="errorMsg"></div><input id="loginBtn" type="submit" value="登录"/><div id="rememberMe" class="frame"><input type="checkbox" id="checkbox-1" class="custom" data-mini="true" name="rememberMe"/><label for="checkbox-1">保持登录状态</label>

<div id="forgotPassFrame"><input id="forgotPass" type="button" data-mini="true" value="忘记密码?/>

</表单>

这是我的 javascript 方法.请注意，即使此处唯一的代码行是return false;"表单仍然提交.我还检查了萤火虫，以确保该方法实际上正在被调用，并且它确实返回了 false，然后一切都已检查完毕.

函数validateForm(){var usernameTxt = $("#userField").attr("value");var passwordTxt = $("#passField").attr("value");if (usernameTxt == "" || passwordTxt == "" || (usernameTxt == userLbl && passwordTxt == passLbl)){$("#errorMsg").html("请输入用户名和密码.");返回假；}}

有什么明显我遗漏的地方吗?除了您可以在 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/

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

函数validateForm(){var usernameTxt = $("#userField").val();var passwordTxt = $("#passField").val();//注意使用 .val() 而不是 .attr()if (usernameTxt == "" || passwordTxt == "" || (usernameTxt == userLbl && passwordTxt == passLbl)){$("#errorMsg").html("请输入用户名和密码.");返回假；}var $form = $('form');$.ajax({网址:$form.attr('action'),类型:$form.attr('method'),数据:$form.serialize(),成功:函数(响应){ ... }，错误:函数 (a, b, c) { console.log(b);}});}

说明

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

I'm having a problem with a simple html login page I made, where when I submit the login form with invalid credentials the form still submits, even though my validation method is executing the "return false" command. I know that this question has been asked a multitude of times here, but none of the answers to those questions have helped me.

My html form is as follows:

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

And here is my javascript method. Note that even if the only line of code in here is "return false;" the form still submits. I've also checked in firebug to make sure that the method is actually being called and that it is indeed returning false, and it all checks out.

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

Is there something really obvious that I'm missing? I'm not binding the onsubmit event in any way other than what you can see in the html form tag, nor am I assigning any click handler to the submit button.

It might be relevant that I'm using JQuery mobile, is it possible that this is doing something with my form?

解决方案

If you want to handle form submission on your own, you will need to add the data-ajax="false" attribute to the <form> tag so jQuery Mobile leaves it alone.

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.

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

Here is a demo of your form but with the above attribute added: http://jsfiddle.net/XtMw9/

Doing this means that you will have to manually submit your form:

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

Explanation

This works because by default jQuery Mobile will attempt to submit any form via AJAX. Using the data-ajax="false" attribute we can tell jQuery Mobile to leave a specific form alone so we can submit it on our own.

这篇关于Onsubmit 返回 false 时仍然提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！