jQuery Validate doesn't work with an AJAX

Question

Before I even write my problem I want to state that I have read numerous StackOverflow posts about this and I still am running into the same problem. Basically no matter how many ways I alter my code my form still submits without first validating to see if each area is filled. This is my code.

 <form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">

                <label for="name">Name</label> <br>
                <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />

                <label for="email">E-mail</label> <br>
                <input type="email" name="email" class="required email" placeholder="[email protected]" title=" (Your email is required)"> <br />

                <label for="message">Message/Comment</label> <br>
                <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />

                <input type="button" name="submit" id="submit" value="Send Message" />
            </form>

$(document).ready(function(){
$('#contact').validate({
    rules: {
        name: {required: true},
        email: {required: true},
        message: {required: true}
    },
    submitHandler: $(function(form){

        $("#submit").on('click', function(){
            var formData = $('#contact').serialize();
            $.ajax({
                type:"POST",
                data:formData,
                url:"E-mail-form.php",
                done: function(data){
                    $('#contact').html('<p>Your message has been sent. I will reply to you shortly.</p>');
                },
                fail: function(data) {
                    $('#contact').html('<p>Sorry there was a problem your message was NOT sent.</p>');
                }
            });
            return false;

        });
    })
});
});

Now I think the first thing someone is going to notice is that I have a function on submit, but I've tried removing that and my form simply won't submit even with the submitHandler. I think that's where the problem is occurring because when I look at other forums with this problem I don't understand what is causing the form to actually submit without that. Any help or explanation would be very helpful.

Where is the markup for the form?

Sparky
– Sparky

2013-09-21 17:47:19 +00:00
Commented Sep 21, 2013 at 17:47 — Sparky
– Sparky, Commented Sep 21, 2013 at 17:47
Sorry about that just added it.

London804
– London804

2013-09-21 17:52:49 +00:00
Commented Sep 21, 2013 at 17:52 — London804
– London804, Commented Sep 21, 2013 at 17:52

Sparky · Accepted Answer · 2013-09-21 19:04:46Z

2

Quote OP:

"Now I think the first thing someone is going to notice is that I have a function on submit, but I've tried removing that and my form simply won't submit even with the submitHandler. I think that's where the problem is occurring because when I look at other forums with this problem I don't understand what is causing the form to actually submit without that. Any help or explanation would be very helpful."

You need to more carefully look at the syntax of those working examples instead of inserting random event handlers. Putting a click handler inside of the submitHandler which is only fired after the button is clicked makes absolutely no sense.

The form submits without the click handler because the jQuery Validate plugin already has one built in. Even if you didn't use the submitHandler callback option, the plugin would automatically capture the click event of the button (as long as it's a type="submit") and handle it appropriately. However, in this case, you'll still need to define the submitHandler callback because it's where your .ajax() belongs.

So remove the click handler.

Also, your code has syntax errors:

submitHandler: $(function(form){
  // your ajax           
})

You do not put $() around your callback function.

It's simply this:

submitHandler: function(form) {
    // your ajax
}

or with your code...

submitHandler: function (form) {
    var formData = $(form).serialize();  // <- use the "form" argument here
    $.ajax({
       ....
    });
    return false;
}

And finally, your button needs to have type="submit" in order for the plugin to capture it.

<input type="submit" name="submit" id="submit" value="Send Message" />

Working DEMO: http://jsfiddle.net/x4h8L/

edited Sep 21, 2013 at 19:04

answered Sep 21, 2013 at 17:55

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

7 Comments

London804 Over a year ago

I appreciate your input and thank you for helping me but your script does not work on my site. It appears to not be firing, this is the problem I have had the entire time. When I click submit nothing happens and when I look at your script I don't understand how the SubmitHandler works because it's not attached to any event. That's why initially I added $("#submit").on('click', function(){ var formData = $('#contact').serialize();

Sparky Over a year ago

@London804, see my edited answer updated with your markup. Your button wasn't being captured by the plugin because it wasn't a type="submit". (why it's important to include your HTML in the OP.) Even if I hadn't seen your markup and given the solution, simply compare my working jsFiddle to your site's code to find the problem.

London804 Over a year ago

Still doesn't work, it now validates but does nothing on submit. But I noticed something shouldn't var forData =$('#contact') and not 'form' since contact is the title of the form and that's what I want to serialize?

London804 Over a year ago

Apologizes apparently it is working but I'm not getting the done: function(data){ $('#contact').html('<p>Your message has been sent. I will reply to you shortly.</p>'); To show up on my screen. }

Sparky Over a year ago

@London804, in this case the function's argument, form, represents your #contact so $(form).serialize() is the same.

|

Collectives™ on Stack Overflow

jQuery Validate doesn't work with an AJAX

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related