如何在提交之前检查表单中的值？答案

【问题标题】：How to check values from a form before submitting it?如何在提交之前检查表单中的值？
【发布时间】：2014-05-07 21:39:26
【问题描述】：

我想做的事：

当我点击提交按钮（例如转到 Google）时，我的脚本应该...

将“loading.gif”附加到 ID = #loading 的 DIV 以模拟页面正在加载以及之后
检查用户是否正确填写了表格。如果没有，应该会出现一个弹出窗口。
之后应该转到 GOOGLE

我知道这很容易，但到目前为止我在我的代码中找不到错误。我的 JSFiddle：http://jsfiddle.net/cZshY/

示例如果有人将错误的大学（柏林而不是汉堡）放入“大学”领域，这应该会发生：

应该会出现 loading.gif。
之后应该会弹出一条消息（“错误的大学”）

我的 HTML：

<div>
    <form>
        <p>Nickname: <input name="name" type="text" id="nickname"></p>
        <p>University: <input name="university" type="text" id="univer" value="University of Berlin">
        <p>Login: <input name="login" type="text" id="loginData" value="LE_StuRa"></p>
        <p>Password:<input name="passwordfield" type="password" id="passw" value="34kle1"></p>
    </form>
</div>

<div id="loading"></div>

<form action="http://google.com">
    <input type="submit" value="Continue" id="googleButton">
</form>

我的 Javascript/jquery：

$(document).ready(function(){
    $("#googleButton").click(function(){                
        var load = $("<img src='http://www.tj-auctions.com/images/loading.gif'/>"); 
        $(load).prependTo("#loading").fadeOut(3000, function(){

            if ( $("#loginData").val() != "LE_StuRa" || $("#univer").val() != "University of Hamburg" ) {
                alert ("Wrong login data");
                return false;
            }; 

            if ( $("#passw").val() != "34kle1" ) {
                alert ("Wrong password");
                return false;
            };

            if ( !$("#nickname").val() ) {
                alert ("Please enter a nickname!");
                return false;
            });

        }); 
    });
});

【问题讨论】：

您的表格不正确。您的输入和提交的形式不同。将它们合二为一，而不是 click() 使用 submit()。在提交函数中，您可以返回 false 以取消
@AnthonyHorne 不，用 jQuery 绑定点击处理程序是等效的。
检查你的 Javascript 控制台，你得到一个语法错误，所以没有代码在运行。
好的，所以验证输入，然后通过显示 GIF 然后将其淡出来模拟页面正在加载。
啊，我明白了问题所在。您正在回调函数中进行验证。回调是异步的，因此click 处理程序会在验证发生之前立即返回。如果您等待回调，则需要使用Deferred，我不知道如何编写。您应该立即验证的另一个原因，而不是等待 3 秒。

标签： javascript jquery html

【解决方案1】：

删除最后一个 if 语句之后的结束 ')'。

代码应该是

if ( !$("#nickname").val() ) {
  alert ("Please enter a nickname!");
  return false;
 };

【讨论】：

谢谢。我不知道它是如何到达那里的，因为在我的原始代码中我没有括号（而且它也不起作用）。但是，如果您有兴趣，我已经发布了答案。

【解决方案2】：

哦，好的，我想通了（感谢 Barmar）：

jsfiddle.net/cZshY/20

我已经将 if 语句放入了 fadeOut 的回调函数中。当我首先检查 if 语句并将（1）“加载 gif”和（2）“警报消息”放入 if 语句时，一切正常。

if 语句应如下所示：

if ( $("#loginData").val() != "LE_StuRa" || $("#univer").val() != "University of Hamburg" ) {
    $(load).prependTo("#loading").fadeOut(3000, function(){
        $("#loading").html("Wrong university!");    // or alert, but I think this looks better.
    });
    return false;
};

【讨论】：