Google Recaptcha stops bouncer

[hairy-dog]

If I set up a form to be validated, it works beautifully. But if I try to incorporate Google Recaptcha into the submit process, the field validation stops working.

I suspect that this is a Google issue, but getting them to change anything seems a forlorn hope. Is there a fix or a workaround, or do I have to choose between Bouncer and Recaptcha?

[cferdinandi]

Do you have a reduced test case I can look at?

[hairy-dog]

I'm sorry, I can't make any sense of your test case page.
Here is the stripped-down html, but this page renders it instead of showing the code

<script src="https://www.google.com/recaptcha/api.js" async defer></script> ``<script> function onSubmit(token) { document.getElementById("feedbackform").submit(); } ``</script> <script src="https://www.clientaddress.co.uk/bouncer.polyfills.min.js"></script>
<script> var bouncer = new Bouncer('[data-validate]')

</script> <style>.error { border: 1px solid red } </style>

`

`

You need to fill in all the boxes. If you leave any blank, it won't work.

<form method="post" id="feedbackform" action="https://www.clientaddress.co.uk/form.php">
<input type="hidden" name="bad_url" value="https://www.clientaddress.co.uk/problem.html" />
`

`

Your Details

<p><label class="req" for="givenname">Your Name *</label>

<p><label class="req" for="recipients">What number is two more than ten? *</label>
<input type="number" min="10" max="20" tabindex="60" required name="recipients" id="recipients" \d{2,2} size="2" minlength="2" maxlength="2" placeholder="" /> sorry, we need this to reduce spam

<p><label class="req" for="email">Email * </label>

<p><label class="req" for="phone">Phone * </label>

<p><input type="submit" value="Test"></p>

 

<input type="hidden" name="derive_fields" value="imgverify=g-recaptcha-response" />
</body></html>

Clicking Submit runs recaptcha OK, but not bouncer.
Clicking Test runs bouncer OK, but (obviously) not Recaptcha

[hairy-dog]

After several tries, I still can't get the code to show properly. The google submit button is:
<input type="submit" class="button g-recaptcha" data-callback="onSubmit" data-sitekey="sitekey here" title="Send the message" tabindex="200" id="send" value=" &nbsp; Send &nbsp; " />

[cferdinandi]

You want to wrap your code in three backticks on each end, like in markdown.