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

问题描述

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

我的html表单如下：

p>

 < form onSubmit =return validateForm（）; method =getaction =TestPage.html> 
< div id =centralPointclass =frame> 
 < / div> 
< div id =credentialsFrameclass =frame> 
< input id =userFieldtype =textname =Username/> 
< input id =passFieldtype =passwordname =Password/> 
< / div> 
< div id =errorMsg>< / div> 
< input id =loginBtntype =submitvalue =Login/> 
< div id =rememberMeclass =frame> 
< input type =checkboxid =checkbox-1class =customdata-mini =truename =rememberMe/> 
< label for =checkbox-1>让我登录< / label> 
< / div> 
< div id =forgotPassFrame> 
 < / div> 
< / form> 
  

这里是我的javascript方法。请注意，即使这里唯一的代码行是return false;该表单仍然提交。我也检查过萤火虫，以确保该方法实际上被调用，它确实返回false，并且全部检出。

  function validateForm（）
 {
 var usernameTxt = $（＃userField）。attr（value）; 
 var passwordTxt = $（＃passField）。attr（value）; 
 
 if（usernameTxt ==|| passwordTxt ==||（usernameTxt == userLbl&& passwordTxt == passLbl））
 {
 $（ #errorMsg）。html（请输入用户名和密码。）; 
返回false; 
 
 
 
 
 
 
 $ b 
有什么东西真的很明显，我错过了？我不以任何方式绑定onsubmit事件，除了您可以在html表单标记中看到的内容，我也不会将任何点击处理程序分配给提交按钮。 
 
 
 
我使用JQuery移动可能是相关的，这是否有可能对我的表单做些什么？
解决方案
如果你想自己处理表单提交，你需要添加 data-ajax =false属性添加到< form> 标签中，这样jQuery Mobile就不再需要它了。  $ b 
 
 
为了防止表单提交被
 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（）; //注意使用.val（）而不是.attr（）
 
 if（usernameTxt == || passwordTxt ==||（usernameTxt == userLbl&& passwordTxt == passLbl））
 {
 $（＃errorMsg）。html（请输入用户名和密码。）; 
返回false; 
} 
 
 var $ form = $（'form'）; 
 $ .ajax（
 url：$ form.attr（'action'），
 type：$ form.attr（'method'），
 data：$ form。 （），
成功：函数（响应）{...}，
错误：函数（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.

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