CODEWITHSUNDEEP
javascriptjqueryformsvalidationdelay
ModernDesigner
ModernDesigner

Reputation: 7717

jQuery - How to delay form submit until animation is finished?

I have this page animation which when the user leaves the page the document slides to the left. However, I also have this form which the user fills in then hits the "Next" button, and I want the submission of the form to wait until the animation is finished (animation e3ms?)

With my mediocre knowledge of JavaScript (especially forms and parsing) I wrote a script which to my knowledge should work, but it's not. Any ideas? Any help would be much appreciated.

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: [email protected]">
    <span class="error-msg">You must fill out required elements!</span>

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

CSS code just styles form and sets the .error-msg with an opacity of "0".

P.S.: I know JavaScript form validation is dangerous, but once I publish my site I will back it up with PHP or ASP validation on my server, alongside JavaScript validation.

Upvotes: 1

Views: 3319

Answers (3)

Mathieu Lordon
Mathieu Lordon

Reputation: 309

You need to use a callback function at the end of the animation to submit the form. Try the following.

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;
}

Upvotes: 1

Owen
Owen

Reputation: 501

I would probably move your ValidateForm callback onto the onclick of the submit button. Then in your callback call e.preventDefault() to stop the form submitting from the click bubbling through. After that, submit the form manually in the callback of the animation (http://api.jquery.com/animate/)

HTML

<form name="myForm" action="next.html">
    <input type="text" name="myInput" placeholder="Example: [email protected]">
    <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(); }
        });
    }
}

Upvotes: 1

Thierry Blais
Thierry Blais

Reputation: 2858

This is the documentation concerning jQ animate Here

The last argument in your .animate parameters is the callback function which is executed when your animation is over, so yours would look like:

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

P.S. the 200 represents the time it takes to accomplish the animation....the default is 400.

Upvotes: 0

Related Questions