Is there a way to check if a cell phone number is valid?

0

I searched search sites and found nothing that could help; I needed to prevent residential numbers from being typed in the input so I would just use javascript for this.

    
asked by anonymous 05.12.2014 / 23:47

1 answer

1

Well, regex is not my strong. But I tried something for you here, I followed the following pattern:

  • The value entered by the user must start with 8 or 9 - ^[9|8] ;
  • Must be followed only by numbers - \d ;
  • Must have a minimum length of 7 digits and a maximum of 8 - {7,8} ;

And this was the regex I made to validate what I said above: /^[9|8]\d{7,8}/g

Example

CSS (Just to leave the red border ...)

/* Só para remover o outline */
input.phone-number:focus {
    outline: none;
}

input.phone-number.invalid {
    border: red 1px solid;
}

HTML (A basic form)

<form id="form">
    <input type="tel" class="phone-number" autofocus="true" placeholder="Digite um número de celular" maxlength="9">
    <button type="submit">Enviar</button>
</form>

Javascript

// Quando o DOM estiver pronto;
document.addEventListener('DOMContentLoaded', function() {

    // Pega o input do telefone;
    var phone = document.querySelector('.phone-number');

    // Detecta quando o formulário for enviado;
    document.getElementById('form').onsubmit = function(evt) {

        // Se não passar na validação do regex;
        if(!phone.value.match(/^[9|8]\d{7,8}/g)) {
            phone.classList.add('invalid');
        }

        // Se passar na validação do regex;
        else {
            // Envia o formulário caso seja valido
            return true;
        }

        // Falso por padrão para que o formulário só seja enviado caso seja válido;
        return false;
    };

}, false);

In case I detect when the form is sent with the function onsubmit(); and I leave a return false; by default, just so that the form is only sent if it is valid;

If the number is not valid I add the class .invalid to input.phone-number ;

Otherwise I would like to submit the form ...

@Edit

I did a little function for you here, see if it helps anything:

;(function(window, undefined) {

    "use strict";

    function phoneNumber(params) {
        if(!(this instanceof phoneNumber)) {
            return new phoneNumber(params);
        };

        this.element = params;
    }

    phoneNumber.prototype = {

        check: function(callback, error) {

            var oThis = this,
                oReturn = false;

            [].slice.call(document.querySelectorAll(this.element)).forEach(function(element){
                if(element.value.match(/^\d{2}[8|9]\d{7,8}/g)) {
                    if(callback) callback();
                    oReturn = true;
                }
                else {
                    if(error) error();
                };
            });

            return oReturn;
        }

    };

    window.phoneNumber = phoneNumber;

}(window));

You can create a .js file and insert it in your document just as you would jQuery for example;

<script src="nomedocript.js"></script>

And then you can use it like this:

document.addEventListener('DOMContentLoaded', function() {

    var oPhone = document.querySelector('.phone-number');

    oPhone.oninput = function() {

        phoneNumber('.phone-number').check(function() {
            oPhone.classList.remove('invalid');
            oPhone.classList.add('valid');
        }, function() {
            oPhone.classList.remove('valid');
            oPhone.classList.add('invalid');
        });


    };

});

The function phoneNumber('SELETOR DO ELEMENTO QUE QUER VALIDAR') is what I created for you to use, you should call the .check() method, so it will return true or false to value() of the input you are using; >

See:

// Retorna true para 15954418200;
// Mas false para 123
phoneNumber('.phone-number').check();

If you want to use a callback (as in the example), just pass them as functions within the check() method, see:

phoneNumber('.phone-number').check(function() {
    // Callback para sucesso
}, function() {
    // Callback para erro
});

Unfortunately, due to portability it is not possible to check which carrier is a number only by the number itself. If you want to validate this, you'll have to use another system, maybe even have to work with AJAX requests for ready-made systems; @Math left as a comment of your question one of these services, it's up to you to check which one is best for you to use ...

    
06.12.2014 / 01:32