Trigger HTMl validation before recaptcha submit

internetarchive · May 13, 2024 · 732820a · 732820a
1 parent 0f021a2
commit 732820a
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/openlibrary/plugins/openlibrary/js/realtime_account_validation.js b/openlibrary/plugins/openlibrary/js/realtime_account_validation.js
@@ -1,10 +1,10 @@
 export function initRealTimeValidation() {
- const i18nStrings = JSON.parse(document.querySelector('form[name="signup"]').dataset.i18n);
+ const signupForm = document.querySelector('form[name=signup]');
+ const i18nStrings = JSON.parse(signupForm.dataset.i18n);
 
  if (window.grecaptcha) {
  // Callback that is called when grecaptcha.execute() is successful
  function submitCreateAccountForm() {
- const signupForm = document.querySelector('form[name=signup]')
  signupForm.submit()
  }
  window.submitCreateAccountForm = submitCreateAccountForm
@@ -96,8 +96,10 @@ export function initRealTimeValidation() {
 
  $('#signup').on('click', function(e) {
  e.preventDefault();
- if (window.grecaptcha) {
- window.grecaptcha.execute()
- }
+ if (signupForm.checkValidity()) {
+ if (window.grecaptcha) {
+ window.grecaptcha.execute()
+ }
+ } else signupForm.reportValidity();
  });
 }