javascript - jQuery - 如何延迟表单提交直到动画完成？

Question

我有这个页面动画，当用户离开页面时，文档会向左滑动。但是，我也有这个表格，用户填写后点击“下一步”按钮，我希望提交表格要等到动画完成(动画 e3ms？)

凭借我对 JavaScript(尤其是表单和解析)的一般了解，我编写了一个据我所知应该可以工作的脚本，但事实并非如此。有任何想法吗？任何帮助将不胜感激。

JavaScript:

function ValidateForm() {
    var x = document.forms["myForm"]["myInput"].value;

    if(x == null || x == "") {
        $(".error-msg").animate({
            opacity: "1"
        });

        return false;
    } else {
        $("body").animate({
            "margin-left": "-200px",
            opacity: "0"
        });
    }
}

HTML:

<form name="myForm" action="next.html" onsubmit="return ValidateForm();">
    <input type="text" name="myInput" placeholder="Example: johnnyappleseed@me.com">
    <span class="error-msg">You must fill out required elements!</span>

    <input type="submit" value="Next">
</form>

CSS 代码仅设置表单样式并将 .error-msg 的不透明度设置为“0”。

P.S.:我知道 JavaScript 表单验证是危险的，但是一旦我发布我的网站，我将在我的服务器上使用 PHP 或 ASP 验证以及 JavaScript 验证对其进行备份。

Answer 1

我可能会将您的 ValidateForm 回调移动到提交按钮的 onclick 上。然后在您的回调中调用 e.preventDefault() 以停止从点击冒泡提交的表单。之后在动画回调中手动提交表单(http://api.jquery.com/animate/)

HTML

<form name="myForm" action="next.html">
    <input type="text" name="myInput" placeholder="Example: johnnyappleseed@me.com">
    <span class="error-msg">You must fill out required elements!</span>

    <input type="submit" value="Next" onclick="ValidateForm();">
</form>

Javascript

function ValidateForm() {
    // stop the form auto submitting
    e.preventDefault();
    var x = document.forms["myForm"]["myInput"].value;

    if(x == null || x == "") {
        $(".error-msg").animate({
            opacity: "1"
        });

        return false;
    } else {
        $("body").animate({
            "margin-left": "-200px",
            opacity: "0"
        },
        {
             complete: function() { $("form[name='myForm']").submit(); }
        });
    }
}