show and hide div with jquery while using validate plugin

Question

I'm having issues trying to get the fadeIn/Out method AND the form submission to happen within the same script.

Often what's happening is that one will work, and the other won't. I've worked on this for about 6 hours now and I'm sure there is some logic that I'm unfortunately overlooking.

An explanation or breakdown of how this should be written would be greatly appreciated!

HTML

<form id="form" action="#">
                        <div class="formmesage"><p>Hi, I'm </p></div>
                            <div class="nameinput">
                                <input id="name" class="required" type="text" name="name" placeholder="name" tabindex="1"> 
                            </div>
                        <div class="formmesage"><p>and I'm a </p></div>
                            <div class="selection">
                                <select id="profession" name="profession" tabindex="2">
                                    <option type="text" value="designer">designer</option>
                                    <option value="developer">developer</option>
                                    <option value="designer &amp; developer">designer &amp; developer</option>
                                </select>
                            </div>
                        <div class="formmesage"><p>looking to meet other </p></div>
                            <div class="selection">
                                <select id="pairprofession" name="pairprofession" tabindex="3">
                                    <option type="text" value="designer">designers</option>
                                    <option value="developer">developers</option>
                                    <option value="designer &amp; developer">designer &amp; developers</option>
                                </select>
                            </div>
                        <div class="formmesage "><p>in</p></div>
                            <div class="selection">
                                <select id="location" name="location" tabindex="4">
                                    <option type="text" value="New York" p>New York</option>
                                    <option value="Boston">Boston</option>
                                    <option value="Chicago">Chicago</option>
                                </select>
                            </div>
                        <div class="btn">
                            <input id="email" class="required email" type="text" name="email" placeholder="[email protected]" tabindex="5">
                            <button type="submit">submit</button>
                        </div>
                    </form><!-- form -->

JQUERY

$(document).ready(function(){
 $("#form").validate();
  $("#form").submit(function(){
   $("button").click(function(){
    $("#form").delay(500).fadeOut("slow");
     $(".message").delay(1000).fadeIn("slow");
     return false;
     })         
   })
})

Karl-André Gagnon · Accepted Answer · 2013-05-02 12:53:20Z

4

I think it should be written like this

$(document).ready(function(){
    $("#form").validate({
        submitHandler : function(){
            $("#form").delay(500).fadeOut("slow", function(){
                $(".message").fadeIn("slow");
            });
            return false;
        }
    });
});

Validate is doing the submit, do you don't need a submit binding. If you want to modify the action after submit, there's an option for validate : submitHandler. Then after a delay of 500ms, fade out start. When the fadeout is finish, the fadein start.

edited May 2, 2013 at 12:53

answered May 2, 2013 at 2:16

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

patrick Over a year ago

so I get what you're doing here and it makes sense. But it isn't working. The form is submitted, I can see that via the URL change once the button has been clicked. But no animation happens. I'll dig more into submitHandler today.

Karl-André Gagnon Over a year ago

Ahah you are going to hate me, i did a misstake ! Return false isnt in the submitHandler function, you need to mose it in!

patrick Over a year ago

haha! Thanks. I did! It's interesting though, and maybe becuase I'm still a beginner but the fade methods work. But it's still not submitting the data. Or at least it doesn't seem to be doing that. Previously, without the fade methods I would see the data being submitted and ultimately change the URL. Now, I'm not seeing that happen. Should this be an issue? Ultimately connecting it to a database via rails.

Karl-André Gagnon Over a year ago

Return false is preventing the form from submiting.

Collectives™ on Stack Overflow

show and hide div with jquery while using validate plugin

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related