How to limit the characters of the phone number

Technical
1

I want to prevent customers from placing more than X number of characters nor X less number of characters to avoid mistyped contact numbers

2 Likes
2

It might be possible with some Javascript, but I do not think it’s necessary, as we are working on a solution to make sure Phone numbers are valid before submitting the order. It might take sometime to be rolled out but will be worth the wait.

1 Like
3

I want to prevent customers from placing more than X number of characters nor X less number of characters to avoid mistyped contact numbers

4

Any news about the native phone number validation?

5

Please help us to how to set the limit of the phone number

6

Hi @Devesh_Kumar_Rai, @idelasotta, @Leonardo_Pedraza , @Camilo_Useche

I believe the above question was answered here: Help with a JavaScript code to limit the characters of the phone number

Looking forward to any feedback or suggestions. :smile:

7

Another article that might be useful: Phone Number Field Validation and Limiting With Error message and Country Code Included

8

Hi!

I hope you’re doing well.

I have the code to make this work, I used to validate phone numbers from Colombia.

<script>
    document.addEventListener('DOMContentLoaded', function () {
    var submitButton = document.getElementById('submitButton');
    // Agregar el evento en la fase de captura
    submitButton.addEventListener('click', function(event) {
        var inputTelefono = document.getElementsByName('phone')[0];
        var telefono = inputTelefono.value;
        var patronTelefonoColombia = /^3\d{9}$/;

        if (!patronTelefonoColombia.test(telefono)) {
            alert('Por favor ingrese un número de teléfono válido en Colombia (10 dígitos y comienza con 3).');
            event.stopImmediatePropagation(); // Detiene la propagación del evento
        }
    }, true); // True indica que el evento se maneja en la fase de captura
});

</script>

The only thing you have to set up the id of the submit button to ‘submitButton’.

If you have any doubts, don’t hesitate to contact me.

Lucio Garcia
Tech Expert
https://ltmsoluciones.com/us
https://ltmsoftware.com
Our instagram account

2 Likes
9

Hola Lucio

Muchas gracias por el código. ¿Podrías agregar también que verifique la cantidad de dígitos? Es decir, si el comprador escribe menos de 10 digitos muestre el mensaje de alerta. También sería muy bueno que solo permita ingresar números y bloquee el resto de carácteres.
Muchas gracias.

10

aquí está el código

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var inputTelefono = document.getElementsByName('phone')[0];
        var submitButton = document.getElementById('submitButton');

        // Validar la entrada para permitir solo números
        inputTelefono.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '');
        });

        // Agregar el evento en la fase de captura
        submitButton.addEventListener('click', function(event) {
            var telefono = inputTelefono.value;
            var patronTelefonoColombia = /^3\d{9}$/;

            if (telefono.length < 10) {
                alert('Por favor ingrese al menos 10 dígitos.');
                event.stopImmediatePropagation(); // Detiene la propagación del evento
                return;
            }

            if (!patronTelefonoColombia.test(telefono)) {
                alert('Por favor ingrese un número de teléfono válido en Colombia (10 dígitos y comienza con 3).');
                event.stopImmediatePropagation(); // Detiene la propagación del evento
            }
        }, true); // True indica que el evento se maneja en la fase de captura
    });
</script>
11

Una pregunta como hago para ingresar este codigo en mi formulario de pago??

12

Dónde Colocar el Código:
Códigos Personalizados en Funnelish:

  1. Navega al editor de la página de tu formulario de pago en Funnelish.
  2. Abre el menú de Códigos Personalizados haciendo clic en los tres puntos (más acciones).
  3. Coloca este código dentro de la pestaña Body HTML.
  4. Guarda y publica los cambios.