How to limit the characters of the phone number

Technical
1

:pushpin: Quick Update: If you’re landing on this thread looking for a way to limit phone number characters, you no longer need to use custom scripts or workarounds!

We recently rolled out a native update to Funnelish that handles automatic phone number validation right out of the box.

The phone input fields now include an international country code dropdown. Once a customer selects their country, the form automatically verifies the correct character length and format for that specific region. It’s completely built-in, meaning it prevents typos and invalid numbers automatically without any extra setup or coding on your end.

Helpful Links & Resources:

General #updates checkout #validation

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
10 digits in the phone number
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>
1 Like
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.