Bloquer la soumission d'un formulaire avant la vérification d'un numéro de téléphone

Bonjour,

J'aurais besoin de votre aide afin de résoudre un petit problème mais qui me rend dingue depuis plusieurs jours...

Je précise que je n'ai aucune connaissance en Javascript, j'ai généré le code via GPT4 (c'est à la mode...). Je peux tout au plus avoir une vague compréhension de l'utilité de chaque élément du code.

Pour résumer:

Je dispose d'un site Wordpress avec lequel j'utilise le plugin Gravity Forms afin d'intégrer un formulaire d'inscription sur une de mes pages. J'aimerais que les utilisateurs fassent vérifier leur numéro de téléphone grâce à un code envoyé par SMS et qu'ils doivent ensuite indiquer dans le formulaire. Pour ce faire, j'utilise la solution FirebaseUI.

J'ai donc intégré le widget Firebase UI dans le formulaire, et il fonctionne correctement (je reçois bien le SMS envoyé, et je peux le valider dans le widget).

Cependant, je souhaite effectuer deux choses:

1) Copier le numéro de téléphone indiqué dans le widget Firebase UI dans un champs de mon formulaire, uniquement s'il a été validé.
2) N'autoriser l'envoi du formulaire que lorsque le numéro de téléphone a été validé.

La situation actuelle est que le code ci-dessous n'empêche pas le formulaire de s'envoyer même si le numéro de téléphone n'a pas été vérifié. Et j'ignore si le téléphone se copie bien dans le champs du formulaire prévu à cet effet (#input_2_12). J'ajoute que lors de certaines tentatives de modification du code, une fenetre d'alerte apparaît bien lorsque l'on tente d'envoyer le formulaire sans vérification, mais lorsqu'on la ferme, le formulaire se met dans une sorte d'état d'attente, d'où la fonction "resetFormState" en bas de code.

Y a-t-il une âme charitable pour m'expliquer d'où vient le problème ?

Par avance, un grand merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// Ajout du CSS FirebaseUI
const linkFirebaseUI = document.createElement('link');
linkFirebaseUI.rel = 'stylesheet';
linkFirebaseUI.href = 'https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.css';
document.head.appendChild(linkFirebaseUI);
 
// Ajout des scripts Firebase
const scriptFirebase = document.createElement('script');
scriptFirebase.src = 'https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js';
document.head.appendChild(scriptFirebase);
 
const scriptFirebaseAuth = document.createElement('script');
scriptFirebaseAuth.src = 'https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js';
document.head.appendChild(scriptFirebaseAuth);
 
const scriptFirebaseUI = document.createElement('script');
scriptFirebaseUI.src = 'https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js';
document.head.appendChild(scriptFirebaseUI);
 
// Ajout du script reCAPTCHA
const scriptRecaptcha = document.createElement('script');
scriptRecaptcha.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
document.head.appendChild(scriptRecaptcha);
 
scriptFirebase.onload = function () {
  scriptFirebaseAuth.onload = function () {
    scriptFirebaseUI.onload = function () {
      // Configuration de Firebase
      const firebaseConfig = {
        apiKey: "****",
        authDomain: "****",
        projectId: "****",
        storageBucket: "****",
        messagingSenderId: "****",
        appId: "****",
        measurementId: "****"
      };
 
      // Initialisation de Firebase
      firebase.initializeApp(firebaseConfig);
 
      // Configuration de Firebase UI
      const uiConfig = {
        callbacks: {
          signInSuccessWithAuthResult: (authResult, redirectUrl) => {
            const phoneNumber = authResult.user.phoneNumber;
            document.getElementById('input_2_12').value = phoneNumber;
            document.getElementById('firebaseui-auth-container').style.display = 'none';
            return false;
          },
        },
        signInOptions: [
          {
            provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
            recaptchaParameters: {
              type: 'image',
              size: 'invisible',
            },
            defaultCountry: 'FR',
          },
        ],
      };
 
      // Démarrage de Firebase UI
      const ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebaseui-auth-container', uiConfig);
 
      document.addEventListener('DOMContentLoaded', () => {
        const form = document.querySelector('.gform_wrapper form');
        if (form) {
          // Réinitialiser l'état de soumission du formulaire
          function resetFormState() {
            const submitButton = form.querySelector('.gform_button');
            if (submitButton) {
              submitButton.disabled = false;
              submitButton.classList.remove('gform_button_submitting');
            }
          }
 
          form.addEventListener('submit', (event) => {
            const phoneNumber = document.getElementById('input_2_12').value;
 
            if (!phoneNumber) {
              event.preventDefault();
              alert('Veuillez vérifier votre numéro de téléphone avant de soumettre le formulaire.');
 
              // Appeler la fonction pour réinitialiser l'état de soumission du formulaire
              resetFormState();
				          // Réinitialiser l'instance de reCAPTCHA
          if (typeof grecaptcha !== 'undefined') {
            grecaptcha.reset();
          }
        }
      });
    }
  });
};
};
};