First of all lets mock an endpoint to be able to make XHR request for our examples
Note that in order to use this mocked version of axios below, we will be passing it as "axiosInstance" via options
In order not to pass the same options for every form lets encapsulate this logic in our BaseForm class
Priority of the passing option is always higher then methods within the class
Let's introduce a small helper function called onRecaptchaReady to be able to wait until Google Recaptcha library is loaded and ready. We will use it in the further examples
In order to continue working with all controls from validation perspective we can introduce additional Parsley validator for recaptcha field. It is possible because basically what recaptcha does is sending an additional token with your form data. After you click on its checkbox it sends request to a google server to get this token and then injects it within a <textarea> element to your form. This token must be sent to the server and validated there. Read more about this here and here
We can treat recaptcha as an input that is required (so user must click on the recaptcha checkbox before he can submit form). It gives us an additional advantage because if something goes wrong with the captcha validation on the server side we can return server validation errors and ask user to confirm he is not a robot one more time To do so we have to have input which we can apply our validation to but because Recaptcha add <textarea> dynamically we should have input that us fully controlled by us and is filled with token value once user confirms he is not a robot
Because Invisible ReCaptcha is totally different from the ordinary "checkbox" approach we can't treat it as another form fiend and so Parsley validator. To be able to make form wait until Invisible ReCaptcha challenge is passed we can implement "beforeSubmitPromise" option which should return a Promise. Form will be submitted only after that promise is resolved.