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コードは、フォームのスタイルを設定し、不透明度が「0」の.error-msgを設定します。

PS：JavaScriptフォームの検証は危険だと知っていますが、サイトを公開したら、JavaScript検証と一緒にサーバー上でPHPまたはASP検証を使用してバックアップします。

4

3 に答える 3

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 に答える
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 に答える
0

jQ animateに関するドキュメントはこちら

.animate パラメータの最後の引数は、アニメーションが終了したときに実行されるコールバック関数であるため、次のようになります。

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

PS 200 は、アニメーションを完了するのにかかる時間を表します....デフォルトは 400 です。

于 2012-11-26T23:43:35.380 に答える