1

我有这个页面动画，当用户离开页面时，文档会向左滑动。但是，我也有这个用户填写然后点击“下一步”按钮的表单，我希望提交表单等到动画完成（动画 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”。

PS：我知道 JavaScript 表单验证很危险，但是一旦我发布了我的网站，我会在我的服务器上使用 PHP 或 ASP 验证以及 JavaScript 验证来备份它。

4

3 回答 3

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;
}
于 2012-11-26T23:41:30.110 回答
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(); }
        });
    }
}
于 2012-11-26T23:47:44.930 回答
0

这是关于 jQ animate Here的文档

.animate 参数中的最后一个参数是动画结束时执行的回调函数，所以你的看起来像：

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

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

于 2012-11-26T23:43:35.380 回答