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.
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.
Well, regex is not my strong. But I tried something for you here, I followed the following pattern:
^[9|8]
; \d
; {7,8}
; And this was the regex I made to validate what I said above: /^[9|8]\d{7,8}/g
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 ...
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 ...