CODEWITHSUNDEEP
jqueryjquery-validate
SyberKnight
SyberKnight

Reputation: 225

JQuery Validation SubmitHandler for multiple forms on same page

I have been using successfully the jQuery Validation script. But now I have the need to put two forms on one webpage.

I found the code to standardize the Validate rules and such, but I'm stumped on how to use what I've been using for inside the "submitHandler" part. I've been using it to produce a spinner gif (hide/show).

But now with having two forms on the same page, either one will activate the other spinner or they both activate or none activates when either submit button is clicked.

Any ideas on how to separate this out?

$(document).ready(function() {
  $('form').each(function() {
    $(this).validate({
        // edited out non-relevant code for this question //

        submitHandler: function(form) {

            $('#submitSpin').show();
            $('#submitButt').hide();
            form.submit();

        }, // END submitHandler

    }); // END this validate
  }); // END form each function
}); // END document ready function

So clearly I can't use the same ID for both forms' buttons; but if I make them different, I'm not sure how to write "IF this form is submitted, then show/hide these ID's, but if THIS OTHER form is submitted, then show/hide THESE other ID's" (so to speak).

Upvotes: 0

Views: 2320

Answers (1)

Sparky
Sparky

Reputation: 98738

Just like form.submit(), simply use the form argument that is passed into the submitHandler. It represents the form object. Then use jQuery to find and target its spinner.

submitHandler: function(form) {
    $(form).find('.submitSpin').show();
    $(form).find('.submitButt').hide();
    form.submit();
}, // END submitHandler

Be sure to never repeat any id on the page, so submitSpin and submitButt can only be class names.

Proof-of-concept DEMO: jsfiddle.net/0g0oaonL/2/

Upvotes: 2

Related Questions