Grow your CSS skills. Land your dream job.

How to add a Jquery slideDown effect to contact form errors?

  • # July 17, 2013 at 8:07 pm

    Right now when I attempt to send a blank form the whole page refreshes before displaying the error messages.
    I’d like to add a slide down effect to these errors and somehow stop the page from refreshing…
    I tried to use this:

    $(document).ready(function(){
    $('.error').hover(function(){
    $('span', this).slideUp(0).stop(true, true).slideDown(500);
    },
    function(){
    $('.error', this).css("display", "block").stop(true, true).delay(100).slideUp(500);
    });
    });

    But of course it doesn’t work for me…
    Can someone please help me fix this?

    Here is my full contact.php page template//
    [http://pastebin.com/FuzQCyr9](http://pastebin.com/FuzQCyr9 “http://pastebin.com/FuzQCyr9″)

    and the jQuery//
    [http://pastebin.com/ELm5Tzri](http://pastebin.com/ELm5Tzri “http://pastebin.com/ELm5Tzri”)

    # July 18, 2013 at 2:45 am

    Are you using jQuery UI?

    Link to the site where the contact form can be found?

    # July 18, 2013 at 4:50 am

    .delay(); only applies to the DOM element you are calling, which is .error. This doesn’t apply to document/window locations.

    The best way to achieve this is to have the error display after the page has loaded (which is achievable with PHP using if/else statements). Trying to do it before will require AJAX without the page refreshing.

    Plus, are these errors actually displaying at all?

    Also, remove this this from your code:



    $('.error').hover(function(){
    $('span').slideUp(0).stop(true, true).slideDown(500);
    },
    function(){
    $('.error').css(
    {

    display: "block"

    }).stop(true, true).delay(100).slideUp(500);
    });

    # July 19, 2013 at 4:38 am

    @chrisburton It’s a test site so I am unable to post the link :/

    @JamesMD I’m new to all of this so I have no idea what to do :/
    The errors pop up when the form is not submitted correctly………

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".