First of all, you have too many questions/issues in one post. You're normally expected to try and figure things out on your own as much as you can before asking. Here are some issues I picked up:

1. Form validation process does not conflict with form submission process.
2. Whether recaptcha goes before or after the validation is not an important issue, but vast majority of forms where it's used, do it after the validation.
3. Try to avoid using JQuery since it adds an unneeded dependency. Pure JS is just as powerful.
4. If you want a nicely styled error message - that's a completely different issue that has no relation to recaptcha or form submission. You now talking about DOM editing and styling.
5. Running something before recaptcha is a question of timing things rather than limitations of Recaptcha's API. It's completely in your power.
6. Server-side validation and client-side validation are both needed, but they largely play different roles: client is more for user-friendly error reporting while server is a real validation of user input. It's a good practice to keep them in tight sync. So having BE validation doesn't excuse you from having FE validation.
7. You don't need additional POST requests for FE validation. Additional communication with the back-end during validation is needed for things that the client can't validate.
8. Finally, you can do your validation before submitting the payload to the server. I suggest looking at the concept of async: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function This is to make your form submission after the response from Recaptcha comes and after you're done with your FE validation. Promises is how it's usually comfortable to work with: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise