Stay on the page with jQuery Validate plugin

Question

When I click on the submit button of my form I'm redirected because of the PHP on the page "Form sent". How to stay in the same page with jQuery validate form plugin please ?

PHP FILE

    <?php
        // [I HAVE CUT THE CODE]

        if(mail($to, $subject, $message, $headers)){
            echo "Form sent";
        } else {
            echo "Form not sent";
        }
    ?>

JQUERY FILE

$("#form-contact").validate({

submitHandler: function(form) {
            $('.btn-validate-group:visible').hide();
            $('.message-success').fadeIn(1000);
            form.submit();
        }

});

HTML FILE

<form id="form-contact" action="php/traitement.php" method="post"></form>

UPDATE 1

submitHandler: function(form) {
    $('.btn-validate-group:visible').hide();
    $('.message-success').fadeIn(1000);
    $.ajax({
          type: "POST",
          url: url,
          data: data,
          success: function(result){ console.log("success!", result);},
          dataType: dataType
        });
    return false;
}

I'm always redirected on "Form sent" page. I know nothing about Ajax :-/

UPDATE 2

http://jsfiddle.net/Xroad/2pLS2/25/

Answer 1

jQuery .ajax() can be used to submit data to the server without a page refresh, but it's not exclusive to the jQuery Validate plugin.

---

However, here are your two options using the jQuery Validate plugin.

Standard form submit using the default action of the form element (as you've done)...

$("#form-contact").validate({
    submitHandler: function(form) {
        $('.btn-validate-group:visible').hide();
        $('.message-success').fadeIn(1000);
        form.submit();  // standard submit of the default form action
    }
});

To stay on same page, use .ajax() in the submitHandler callback...

$("#form-contact").validate({
    submitHandler: function(form) {
        $('.btn-validate-group:visible').hide();
        $('.message-success').fadeIn(1000);
        $.ajax({    // submit form using ajax
            // your ajax options here
        });
        return false;  // block default form action  
    }
});

See the jQuery .ajax() documentation for the options.

---

This is your own jsFiddle, which shows everything is working. I cannot test the ajax but the form is not refreshing the page as you claim.

Answer 2

If I understand correctly what you want, one way would be to try to submit from jQuery. In the submitHandler have something like:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: function(result){ console.log("success!", result);},
  dataType: dataType
});

The tricky part would be to get all the information into the data object before calling this.

The success function would have the data from the server after posting.

More info: https://api.jquery.com/jQuery.post/

Answer 3

If you make it work without validate plugin and more organised validation process then I would like you to have a look my code:

  jQuery(document).ready(function($) {

     $('#MyForm').on('submit', function(){
        var form = this;
        if(validateForm(form)) {
            var values = $(form).serialize();
            $.ajax({
                url: "test.php",
                type: "post",
                data: values ,
                success: function (response) {
                    // you will get response from your php page (what you echo or print)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }


            });
            event.preventDefault(); //changed to allow the tag manager to notice that the form was submitted
        }
        else{
            event.preventDefault();
            return false;
        }
      });

        // validate Form
        function validateForm(form) {
            valid = true;

            $(form).find('input[type=text], input[type=email]').each(function(i, val){
                if(validateField(val, true) == false) { valid = false; }
            });

            return valid;
        }

        // validate all form fields
        function validateField(field, submit) {
            var val = $(field).val();
            if($(field).attr('aria-required') == 'true' && submit){
                if(val == '') {
                    $(field).parent().removeClass('valid');
                    $(field).parent().addClass('error');
                    return false;
                }else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
                // you can more specific
                if($(field).attr('type') == 'text') {
                    $(field).parent().addClass('error');
                    return false; }
                else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
                // you can more specific
                if($(field).attr('type') == 'email') {
                    $(field).parent().addClass('error');
                    return false; }
                else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
            }
        }
        // Run validation before Submit the form
        $('input[type=text], input[type=email]').on('change', function(){
            if($(this).val() != ''){
                $(this).parent().removeClass('error valid');
                validateField(this, false);
            }
        });
    });