mirror of
https://gitlab.crans.org/bde/nk20
synced 2025-08-31 08:55:26 +02:00
Better phone input (no invalid number)
This commit is contained in:
@@ -31,3 +31,45 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrajavascript %}
|
||||
<!-- intl-tel-input CSS/JS -->
|
||||
<script>
|
||||
(() => {
|
||||
const input = document.querySelector("input[name='phone_number']");
|
||||
const form = document.querySelector("#profile_form");
|
||||
|
||||
if (!input || !form) {
|
||||
console.error("Input phone_number ou form introuvable.");
|
||||
}
|
||||
|
||||
const iti = window.intlTelInput(input, {
|
||||
initialCountry: "auto",
|
||||
nationalMode: false,
|
||||
autoPlaceholder: "off",
|
||||
geoIpLookup: callback => {
|
||||
fetch("https://ipapi.co/json")
|
||||
.then(res => res.json())
|
||||
.then(data => callback(data.country_code))
|
||||
.catch(() => callback("fr"));
|
||||
},
|
||||
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.2/build/js/utils.js"),
|
||||
});
|
||||
|
||||
form.addEventListener("submit", function(e){
|
||||
if (!input.value.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const number = iti.getNumber(intlTelInput.utils.numberFormat.E164);
|
||||
if (number) {
|
||||
input.value = number;
|
||||
form.submit();
|
||||
} else {
|
||||
e.preventDefault();
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user