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代码只是样式表格，并设置不透明度为“0”的.error-msg。

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

Answer 1

您需要在动画结束时使用回调函数来提交表单。请尝试以下方法。

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

    if(x == null || x == "") {
        $(".error-msg").animate({
            opacity: "1"
        });
    } else {
        if ($('form').css('opacity') == 0) {
            return true;
        }

        $("body").animate(
            {margin-left: "-200px",opacity: "0"},
            function() {
                $('form').submit();
            }
        );
    }

    return false;
}

Answer 2

我可能会将您的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(); }
        });
    }
}

Answer 3

这是关于jQ animate Here

的文档

你的.animate参数中的最后一个参数是动画结束后执行的回调函数，所以你的看法如下：

$("body").animate({
            "margin-left": "-200px",
            opacity: "0"
        }, 200, function() {
            $('form').submit();
        });

P.S。 200表示完成动画所需的时间......默认值为400。

jQuery - 如何延迟表单提交直到动画结束？

3 个答案: