df

Vue/Fichebeneficiaire/index.php

@@ -1008,7 +1008,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     
-	
 	if(prendreRadio){
 		// Événements sur les boutons radios
 		prendreRadio.addEventListener('change', togglePhotoDivs);
@@ -1018,4 +1017,62 @@ document.addEventListener('DOMContentLoaded', function() {
 		togglePhotoDivs();
 	}
 });
+</script>
+
+<script>
+    const inputTel = document.getElementById('telephonePortable');
+    const checkIgnorer = document.getElementById('ignorerFormat');
+    const aideTel = document.getElementById('aideTelephone');
+
+    // Messages traduits pour le JS
+    const msgErreur = "<?= est_anglophone() ? 'The number must start with 250 and contain at least 12 digits.' : 'Le numéro doit commencer par 250 et comporter au moins 12 chiffres.'; ?>";
+
+    // Fonction pour gérer les messages d'erreur personnalisés
+    window.validerMessageTelephone = function(input) {
+        if (!checkIgnorer.checked) {
+            input.setCustomValidity(msgErreur);
+        } else {
+            input.setCustomValidity('');
+        }
+    };
+
+    // Écouteur sur la checkbox pour activer/désactiver les règles
+    checkIgnorer.addEventListener('change', function() {
+        if (this.checked) {
+            // On retire les contraintes
+            inputTel.removeAttribute('pattern');
+            inputTel.removeAttribute('title');
+            inputTel.setCustomValidity('');
+            inputTel.classList.remove('is-invalid');
+            aideTel.style.display = 'none'; // On cache l'aide du format requis
+            inputTel.placeholder = "<?= _('Entrez le numéro'); ?>";
+        } else {
+            // On remet les contraintes par défaut
+            inputTel.setAttribute('pattern', '^250[0-9]{9,}$');
+            inputTel.setAttribute('title', msgErreur);
+            aideTel.style.display = 'block';
+            inputTel.placeholder = "Ex:250700000001";
+            
+            // On redéclenche la validation visuelle
+            inputTel.dispatchEvent(new Event('input'));
+        }
+    });
+
+    // Validation visuelle en temps réel (is-valid / is-invalid)
+    inputTel.addEventListener('input', function() {
+        if (checkIgnorer.checked) {
+            this.classList.remove('is-invalid');
+            this.classList.add('is-valid');
+            return;
+        }
+
+        const pattern = /^250[0-9]{9,}$/;
+        if (pattern.test(this.value)) {
+            this.classList.remove('is-invalid');
+            this.classList.add('is-valid');
+        } else {
+            this.classList.remove('is-valid');
+            this.classList.add('is-invalid');
+        }
+    });
 </script>