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/

Are you getting any JavaScript console errors? **Again... where is the HTML markup of the form?** I don't see any input fields that correspond to your `.validate()` rules. — Sparky, Apr 02 '14 at 00:19
possible duplicate of [jQuery Form Validation before Ajax submit](http://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit) — Sparky, Apr 02 '14 at 00:24
@Sparky I cuted the code. Here the full code : http://jsfiddle.net/Xroad/2pLS2/25/ — Xroad, Apr 02 '14 at 00:24
Your jsFiddle should help me figure out something here, but you still need to put the relevant code within your OP. Just a concise example. See http://sscce.org — Sparky, Apr 02 '14 at 00:26
Everything is working here, http://jsfiddle.net/2pLS2/26/, but obviously I cannot test your ajax from a jsFiddle. — Sparky, Apr 02 '14 at 00:29
@Sparky I would like to render thanks. I found. You cannot test but my code works. Look : http://jsfiddle.net/Xroad/2pLS2/27/ — Xroad, Apr 02 '14 at 00:54
@Sparky Do you know how to reset the form when it's success ? LINE 65 in : http://jsfiddle.net/Xroad/2pLS2/30/ — Xroad, Apr 02 '14 at 01:03
@Xroad, yes, see: http://stackoverflow.com/a/14879958/594235 and http://stackoverflow.com/a/22021014/594235 — Sparky, Apr 02 '14 at 01:21

score 1 · Answer 1 · answered Apr 01 '14 at 23:13

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/

Sparky · Accepted Answer · 2014-04-02T00:35:30.390

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.

Thank you. I tied with Ajax but it's the same (To see my update 1) — Xroad, Apr 01 '14 at 23:40
@Xroad, based on the code in your update 1, I think you need to go back and re-read the [documentation for jQuery `.ajax()`](https://api.jquery.com/jQuery.ajax/). — Sparky, Apr 02 '14 at 00:13

score 0 · Answer 3 · answered Sep 02 '16 at 09:16

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);
            }
        });
    });

Stay on the page with jQuery Validate plugin

3 Answers3