jQuery Validate for multiple forms on a page using ajax

Question

I am trying to use jQuery Validation plugin on my website. I need to validate two separate forms and use ajax to submit them to two different PHP pages. I am new to JavaScript, but have done a lot of research regarding this, however, I am still stuck.

This is what I have come up with so far... How can I validate and submit one form to processA.php and the second form to processB.php. Each form has different fields. Is it possible to add a second submitHandler?

$("form").each(function() {
    $(this).validate({
        submitHandler: function(form) {
            $.ajax({
                type    : 'POST',
                url     : 'processA.php',// write code to send mail in mail.php
                data    : $(form).serialize(),
                cache   : false,
                dataType: 'text',
                success : function (serverResponse) { 
                      alert('mail sent successfully.'); 
                },
                error   : function (jqXHR, textStatus, errorThrown) {
                      alert('error sending mail');
                }
            });
            return false; // Temporary
        }
    });
});

Please only use back-ticks for inline code, not for code blocks. Use the {} button to format a block of code. — Sparky
– Sparky, Commented Sep 2, 2014 at 18:51

Sparky · Accepted Answer · 2014-09-02 19:02:40Z

1

No, you cannot have two different submitHandler callback functions within one instance of the .validate() method. When you call the .validate() method within a jQuery .each()... you are intentionally applying the same options to every form targeted by your .each().

Instead, put the corresponding URL within the action attribute of each form tag...

<form action="processA.php" ...

<form action="processB.php" ...

The use jQuery's .attr() method to get the correct URL from each action...

$("form").each(function() {
    $(this).validate({
        submitHandler: function(form) {
            $.ajax({
                ....
                url: $(form).attr('action'), // <- the correct URL for this form
                ....
            });
            return false; // Temporary
        }
    });
});

edited Sep 2, 2014 at 19:02

answered Sep 2, 2014 at 18:47

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

jQuery Validate for multiple forms on a page using ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related