jQuery validator plugin + ajax submitting not working

Question

I use the jQuery validator plugin (1.11) from bassistance.de and submit via php. Now i have add an ajax call in the submit handler at the end of the javacript code, but the call isn't working, nor exist for the firebug console.

CASE 1 If i put the ajax call at the beginning of the site, it works but the validator plugin isn't seen anymore.

CASE 2 If i put the call inside the submit handler, it doesn't exist and the form is submitted by php.

CASE 3 If i put the code at the end of the page, the contact form is still submitted by php.

Here's the ajax call:

$("#contactform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "formfiles/submit.php",
        data: $(this).serialize(),
        success: function() {
            $('#contactform').html("<div id='message'></div>");
            $('#message').html("<h2>Your request is on the way!</h2>")
            .append("<p>someone</p>")
            .hide()
            .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='images/ok.png' />");
            });
        }
     });
     return false;
});

Anybody knows what's wrong?

Thanks in advance for any help, struggling my head about this.

EDIT For better understand the problem, here's the complete javascript

    $(document).ready(function(){
$("#contactform").validate();      
$(".chapta").rules("add", {maxlength: 0});     



var validator = $("#contactform").validate({

     ignore: ":hidden",
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        cognome: {
            required: true,
            minlength: 3
        },
        subject: {
            required: true,

        },



        message: {
            required: true,
            minlength: 10
        }
    },

    submitHandler: function(form) {



   $("#contactform").submit(function(e){
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "formfiles/submit.php",
    data: $(this).serialize(),
    success: function() {
        $('#contactform').html("<div id='message'></div>");
        $('#message').html("<h2>Your request is on the way!</h2>")
        .append("<p>someone</p>")
        .hide()
        .fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/ok.png' />");
        });
    }
    });
    return false;
 });
    },

});

 });

EDIT 2

The selectors and all the rest seem's to be fine.

 <form action="#n" class="active" method="post" name="contactform" id="contactform">

its very tough to try and diagnose this problem without more code to look at. Marcel's answer is a good example. Please provide us your html and php files so we may better understand what's going on here. — iAmClownShoe, Mar 25 '13 at 21:51
still not going to be enough code... html is needed because you may just be using the selectors wrong. — iAmClownShoe, Mar 25 '13 at 21:56
The jQuery Validate plugin cannot see PHP. _Rendered_ HTML of the form is all that's required. — Sparky, Mar 25 '13 at 22:22
see here answer, may be this one helps to you https://stackoverflow.com/a/70680816/14344959 — Harsh Patel, Jan 12 '22 at 11:38

Sparky · Accepted Answer · 2014-11-13T16:29:46.213

Your ajax belongs inside the submitHandler callback function of the jQuery Validate plugin.

As per docs,

submitHandler, Callback, Default: default (native) form submit

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

Your other problem is that you're calling .validate() twice. After it's called the first time, the other instance is ignored and so are all the rules you're trying to pass into it. The .validate() method gets called ONE time upon DOM ready to initialize the plugin on your form.

Finally, you don't need to put a submit handler into the submitHandler callback function.

DEMO: http://jsfiddle.net/nTNLD/1/

$(document).ready(function () {

     $("#contactform").validate({
         ignore: ":hidden",
         rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             cognome: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "formfiles/submit.php",
                 data: $(form).serialize(),
                 success: function () {
                     $(form).html("<div id='message'></div>");
                     $('#message').html("<h2>Your request is on the way!</h2>")
                         .append("<p>someone</p>")
                         .hide()
                         .fadeIn(1500, function () {
                         $('#message').append("<img id='checkmark' src='images/ok.png' />");
                     });
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });

 });

@sandeepnegi - use the search function or post a new question. Asking questions in a comment is not appropriate. — Sparky, Oct 20 '22 at 15:19

Marcel Gwerder · Answer 2 · 2013-03-25T22:06:27.810

2

You have to put your code into the document ready callback, to be sure that the DOM(your form) is loaded before.

$(document).ready(function() {
 //Code
});

You have to remove your existing .submit() from the submitHandler and place it outside the validation initialization but inside ready. Then inside the submitHandler you only call form.submit(); With form.submit(); you trigger submit, the other one is then fired.

Or you place your $.ajax directly into submitHandler.

The way you do it now, you only add the event listener at the time you click your submit button. Thats actually to late. Directly after that your form gets submitted without ajax.

edited Mar 25 '13 at 22:06

answered Mar 25 '13 at 21:38

Marcel Gwerder

8,353
5
35
60

Outside the plugin the call is inside the `.ready(function()`, and it's working at the beginning of the site. But, at the end of the site and in the submit handler it's not working. – Someone33 Mar 25 '13 at 21:43
The initialization of jquery validation and the submit handler have both to be inside the ready callback. If this doesn't work you have to post the whole code. – Marcel Gwerder Mar 25 '13 at 21:47
Have a look at my updated answer, i'm pretty sure that solves your problem. – Marcel Gwerder Mar 25 '13 at 22:08
I've put the whole ajax call into the submit handler, but still not working. Firebug console shows nothing, the call doesn't exist. See Edit above. The from's still submitted by php. Could it be a php problem? – Someone33 Mar 25 '13 at 22:17
1

@Someone33, the form is still being submitted by PHP because the `submitHandler` is being ignored along with all of your other declared rules & options. You cannot call `.validate()` twice... the second one is being ignored. See my answer for a working demo. – Sparky Mar 25 '13 at 22:20
I would also like to point out, that php has nothing to do with your form submission. That's just a standard browser behaviour. – Marcel Gwerder Mar 25 '13 at 22:23
Yes, technically correct... it's just a standard form submission... in this case, over to a PHP page. – Sparky Mar 26 '13 at 01:20

score 2 · Answer 3 · edited May 27 '15 at 08:36

2

It is easy. Only do this

if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {

here set the ajax

}

edited May 27 '15 at 08:36

Micho

3,929
13
37
40

answered May 27 '15 at 08:00

Carlos

29
1

jQuery validator plugin + ajax submitting not working

3 Answers3

Linked

Related