Question

I’ll admit it, I’m new to AJAX, I’ve always just submitted forms the old school way with a post action on the form itself and that’s been fine. Now I’m trying to work with submitting a form in jQuery via AJAX using the jQuery validate plugin.

I haven’t gotten into checking my server side validation yet, I just want to be sure that I can my client side information validated and submitted. I cannot find a single resource that puts it all together. I can find a lot of information on making the validation work and I’ve found information on posting via AJAX, but I cannot seem to string it all together.

My submission code goes a little something like this:

$(function() {
$("#contactForm .submit-button").click(function() {
    var Name = $("#Name").val();
    var Phone = $("#Phone").val();
    var Email = $("#Email").val();
    var Message = $("#Message").val();
    var dataString = 'Name=' + Name + '&Phone=' + Phone + '&Email=' + Email + '&Message=' + Message;

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: dataString,
    success: function(){
        $('#contactForm').fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

}); 

})

However, it seems that I have to use the submit handler for jQuery validate:

$("#myForm").validate({
rules: {
    command: 'required'
},

messages: {
    command: 'Please enter a command.'
},

submitHandler: function(form) {
    $(form).ajaxSubmit({
        success: function(data) { /* ... */ },
        url: form.action,
   });

My problem is that I’ve tried a few different ways of fitting my code together and I can’t seem to make any magic… I’ve done some searching as well, but I’m just coming up with nothing at all.

I’m hoping someone can help explain what I need to do to fit it together, also if anyone can recommend a good resource for doing server side validation in PHP using this method, I’d really appreciate it.

Thank you!

Answer 1

.ajaxSubmit uses a jQuery form plugin. If you haven’t included it you will get a script error which you can see in any browser console. Will read ajaxSubmit is not a funcion or similar depending on browser

There are sevaeral approaches you can take.

Define your submit handler outside of the validation plugin and remove submitHandler option:

$("#contactForm").submit(function() {
      var $form=$(this)
    /* don't need to manually code each key/value pair*/
    var data= $form.serialize()

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: data,
    success: function(){
        $form.fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

}); 

Or within the submitHandler option of validation plugin you call your own ajax:

submitHandler: function(form) {
   var data= $(form).serialize()

        $.ajax({
        type: "POST",
        url: "scripts/contactengine.php",
        data: data,
        success: function(){
            $(form).fadeOut(1000);
                  $('.thanks').fadeIn(1000);
        }
        });
    return false;
}