Prevent registration form submission if backend checks fail (i.e. taken IA/OL username or email address)

[rebecca-shoptaw]

Dependency to epic #7694. Sub-task of #9205.

Describe the problem that you'd like solved

While the real-time validation fixes in #2055 will provide helpful error messages to the user and #9244 will prevent the user from submitting a form with badly-formatted data, the user will still be able to ignore error messages re: taken email or username and submit the form.

Proposal & Constraints

I think the simplest solution would be adding a second check to the manual HTML validation currently in progress in #9245:

openlibrary/openlibrary/plugins/openlibrary/js/realtime_account_validation.js

Lines 99 to 103 in ec98583

	if (signupForm.reportValidity()) {
	if (window.grecaptcha) {
	window.grecaptcha.execute()
	}
	}

Along with running reportValidity() to trigger the HTML formatting checks, we could add a call to another function like findInvalidInputs that would check if there are any inputs with the invalid class (auto-applied to any inputs that fail realtime checks), and only run the recaptcha/submit the form when both checks pass.

This wouldn't display helpful new error messages the way the HTML checks does, but it would prevent unnecessary bad submissions, and further UI customization (i.e. highlighting existing error messages) could be included in the UI phase of #7694.

Additional context

Will only be able to begin work when #9245 is completed and merged, so as to re-use/expand its logic and avoid merge conflicts.

Stakeholders

@cdrini