ser
This commit is contained in:
parent
2731a7ed21
commit
151bc48322
|
|
@ -293,29 +293,40 @@
|
|||
<div class="col-md-6">
|
||||
<?php if($codeLienParente == "A"): ?>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label class="text-muted small"><i class="fas fa-mobile-alt me-1 text-primary"></i> <?= _("Mobile") ?></label>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="fas fa-mobile-alt me-1 text-primary"></i> <?= _("Téléphone Mobile") ?>
|
||||
</label>
|
||||
<div class="form-check form-switch small">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="ignorerFormat"
|
||||
name="ignorerFormat"
|
||||
<?= ($format == "1") ? "checked" : "" ?>>
|
||||
<label class="form-check-label text-muted" for="ignorerFormat"><?= _("Format libre") ?></label>
|
||||
name="ignorerFormat"
|
||||
<?= ($format === "1") ? 'checked' : '' ?>>
|
||||
<label class="form-check-label text-muted" for="ignorerFormat">
|
||||
<?= est_anglophone() ? "Free format" : "Format libre"; ?>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="fas fa-phone-alt"></i></span>
|
||||
<input type="tel" class="form-control" id="telephonePortable"
|
||||
pattern="^250[0-9]{9,}$" value="<?= $beneficiaire['telephonePortable'] ?>"
|
||||
onchange="maj_mobile_beneficiaire();">
|
||||
<?php if ($format == "0"): ?>
|
||||
<div id="aideTelephone" class="form-text text-muted small">
|
||||
<i class="fas fa-info-circle"></i> <?= est_anglophone() ? 'Required format: 250XXXXXXXXX (min. 12 digits)' : 'Format requis : 250XXXXXXXXX (min. 12 chiffres)'; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white text-muted"><i class="fas fa-phone"></i></span>
|
||||
<input type="tel"
|
||||
class="form-control"
|
||||
id="telephonePortable"
|
||||
name="telephonePortable"
|
||||
value="<?= $this->nettoyer($telephone) ?>"
|
||||
onchange="javascript:maj_mobile_beneficiaire();"
|
||||
oninvalid="validerMessageTelephone(this)"
|
||||
oninput="this.setCustomValidity('')">
|
||||
</div>
|
||||
|
||||
<div id="aideTelephone" class="form-text small mt-1 <?= ($format === "1") ? 'd-none' : '' ?>">
|
||||
<i class="fas fa-info-circle text-info"></i>
|
||||
<?= est_anglophone() ? 'Required format: 250XXXXXXXXX' : 'Format requis : 250XXXXXXXXX'; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="text-muted small mb-1"><i class="fas fa-envelope me-1 text-primary"></i> <?= _("E-mail") ?></label>
|
||||
<div class="input-group input-group-sm">
|
||||
|
|
@ -957,62 +968,73 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
</script>
|
||||
|
||||
<script>
|
||||
const inputTel = document.getElementById('telephonePortable');
|
||||
const checkIgnorer = document.getElementById('ignorerFormat');
|
||||
const aideTel = document.getElementById('aideTelephone');
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
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.'; ?>";
|
||||
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('');
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Validation native
|
||||
*/
|
||||
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'));
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Mise à jour de l'interface (Appelé par le switch)
|
||||
*/
|
||||
function rafraichirEtatTelephone() {
|
||||
if (checkIgnorer.checked) {
|
||||
inputTel.removeAttribute('pattern');
|
||||
inputTel.removeAttribute('title');
|
||||
aideTel.classList.add('d-none');
|
||||
inputTel.classList.remove('is-invalid');
|
||||
inputTel.placeholder = "<?= _('Entrez le numéro'); ?>";
|
||||
} else {
|
||||
inputTel.setAttribute('pattern', '^250[0-9]{9,}$');
|
||||
inputTel.setAttribute('title', msgErreur);
|
||||
aideTel.classList.remove('d-none');
|
||||
inputTel.placeholder = "Ex: 250700000001";
|
||||
validerVisuellement();
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
/**
|
||||
* Validation visuelle Bootstrap
|
||||
*/
|
||||
function validerVisuellement() {
|
||||
// En mode libre, on ne met pas d'erreur visuelle
|
||||
if (checkIgnorer.checked) {
|
||||
inputTel.classList.remove('is-invalid');
|
||||
if (inputTel.value !== "") inputTel.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');
|
||||
}
|
||||
});
|
||||
// En mode strict, on vérifie le pattern 250...
|
||||
const pattern = /^250[0-9]{9,}$/;
|
||||
if (inputTel.value === "") {
|
||||
inputTel.classList.remove('is-valid', 'is-invalid');
|
||||
} else if (pattern.test(inputTel.value)) {
|
||||
inputTel.classList.replace('is-invalid', 'is-valid');
|
||||
} else {
|
||||
inputTel.classList.replace('is-valid', 'is-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
// Écouteurs
|
||||
checkIgnorer.addEventListener('change', rafraichirEtatTelephone);
|
||||
inputTel.addEventListener('input', validerVisuellement);
|
||||
|
||||
// Lancement initial
|
||||
rafraichirEtatTelephone();
|
||||
});
|
||||
|
||||
function togglePhotoSource(source) {
|
||||
const areaCam = document.getElementById('area_prendre_photo');
|
||||
const areaFile = document.getElementById('area_choisir_photo');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user