Multiple captchas not working

[jeesus]

Hi there

I have a page with static contact form in the footer. Whenever I navigate to another page that also includes form with captcha, I get the following error:

TypeError: c is undefined
...(this),d=document.createElement("DIV"),e=c.reCaptchaSiteKey||b.valAttr("recaptch...

This happens only when I load a page with two forms. Removing captcha from one of them, the error won't occur. I have set up validation as follows:

$.validate({
    form: "#contact-form",
    modules: 'security',
}); 
$.validate({
    form: "#quote-form",
    modules: 'date, security, location',
    onModulesLoaded: function () {
        $('input[name="state"]').suggestState();
    },
}); 

Any ideas?

Form validator: 2.3.26
jQuery: 1.11.3

[FuzzyBS]

@jeesus Thanks for including the line with the error, that helps a lot. I will take a look at this as I have been the one working on recaptcha of late.

[FuzzyBS]

OK, I think the problem is that when the first form is setup and the Google script is loaded with the callback, the callback executes without any context and tries all the forms on the page. Because the second form hasn't been setup yet, it doesn't yet have a $form.context.validationConfig yet, thus the undefined error.

I think I've fixed it with an if statement that checks if the context is set, but this will result is running the callback code on the first form twice.

I notice that this is the only use of the validationConfig variable, and jQuery has deprecated the $.context property as of v1.10, and it's been eliminated in jQuery v3.0, so it seems like we should change it. I'm thinking $form.get(0).validationConfig will get the same value as $form.context.validationConfig. What do you think, @victorjonsson ?

I'll create a pull once I've tested it.

[jeesus]

Hey

Thanks for answering. However I discovered the root cause for my problem. The issue was that my listening events script was loaded twice and so did $.validate() on both forms. Sorry for any inconvenience.

[FuzzyBS]

I think there was still an issue even if you aren't encountering it. But I'm glad you opened this issue because I had been considering putting a form on a page twice, but only one showing at a time with responsive layout, however I was certain there would be issues so I abandoned the idea and came up with another responsive solution.

I'm curious if you click the recaptcha on one form then try to submit the other form without clicking that form's recaptcha, does it give a validation error? I think it's probably setting the response value on both hidden fields. It may not show the Google recaptcha checkmark, but I'll bet it will still let you submit the form.

I think with the pull I just did I will have made it so that it will work correctly, regardless. @jeesus I was hoping maybe you could test this for me because I don't have anything setup and I've got to get some other things done tonight. Thanks!

[victorjonsson]

This is no longer an issue http://jsbin.com/faraludala/edit?html,console,output