Form error validation handling with explicit recaptcha 2

answered
#1

I have a form in which I enabled netlify’s explicit recaptcha 2. The form has some basic validation to ensure required fields are completed upon submit.

All works fine, as long as recaptcha checked. However, if not checked, and user tries to submit, the form is reset (all inputs erased), and no error/warning messages show.

I switched over to the honeypot approach instead- and that works fine, including playing nice with my form’s error handling.

However, I’d like to know if the explicit recaptcha behavior I saw is expected? Is there a recommended approach to ensure the form/input fields aren’t simply reset?

#2

hi there, can you please provide a link to a live site? thanks.

#3

I put a form up showing the behavior here:

https://clever-stallman-382bd0.netlify.com/

If any of the req’d inputs are not filled in, with or without recaptcha checked, the form’s js validation works fine.

If you properly complete req’d inputs, however, then try to submit without a checked recaptcha, then the form is simply reset.

#4

Hi @scottkg! Glad to see you found our community :smile:

When you do a submission and a valid recaptcha token is not sent, we reply with an HTTP 303 . If the submissions is being done using HTML and not Javascript this will cause the page to reload, and submissions will be lost. Your options are to either do the submission using JS so the page won’t reload unless you tell it to, or store the data somewhere like in sessionStorage and re-add it to the forms on page load using Javascript.

#5

Thanks for the explanation - will keep that in mind if I decide to revisit the recaptcha route. So far the honeypot method seems to be working fine with my simple html forms.

1 Like