Pessoal alguém teria alguma validação para campo tipo telefone?
Onde o usuario não consegue colocar números fictícios no campo como sequencias de número (99999 8888 123456)
ou algo do tipo?
Pessoal alguém teria alguma validação para campo tipo telefone?
Onde o usuario não consegue colocar números fictícios no campo como sequencias de número (99999 8888 123456)
ou algo do tipo?
Eu utilizo o plugin jQuery mask, para gerencias minhas mascaras.
Apenas adaptei o final para validar sua necessidade.
$(document).ready(function(){
$('body').on('focus', '.phone', function(){
var maskBehavior = function (val) {
return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
options = {
onKeyPress: function(val, e, field, options) {
field.mask(maskBehavior.apply({}, arguments), options);
if(field[0].value.length >= 14){
var val = field[0].value.replace(/\D/g, '');
if(/\d\d(\d)\1{7,8}/.test(val)){
field[0].value = '';
alert('Telefone Invalido');
}
}
}
};
$(this).mask(maskBehavior, options);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<input type="text" placeholder="Telefone" name="phone" class="phone"/>
var maskBehavior = function (val) {
return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
}
Esta parte verifica se vai ser 9 ou 8 dígitos e formata a mascara do jeito correto.
options = {
onKeyPress: function(val, e, field, options) {
field.mask(maskBehavior.apply({}, arguments), options);
Aplica a regra anterior sempre que uma tecla é pressionada.
if(field[0].value.length >= 14){
var val = field[0].value.replace(/\D/g, '');
if(/\d\d(\d)\1{7,8}/.test(val)){
field[0].value = '';
alert('Telefone Invalido');
}
}
Aqui esta o que você quer, quando o conteúdo tiver mais de 14 caracteres realiza a verificação do conteúdo.
var val = field[0].value.replace(/\D/g, '');
- remove tudo que não seja digito (só pra facilitar)./\d\d(\d)\1{7,8}/
- validação de sequencial igual, ignora o DDD, se os dígitos forem todos igual.\1{7,8}
- remete a captura anterior, que deve repetir de 7 a 8 vezesCaso tudo isso seja valido, então realiza o if
que invalida o conteudo.
Não. O máximo que pode ser feito é um Regex que valide o formato do texto colocado para o telefone. Por exemplo, esse abaixo que valida os seguinte formatos com código do país, DDD e telefone com 8 ou 9 dígitos +XX (XX) XXXX-XXXX ou +XX (XX) XXXXX-XXXX
/^(?:\+)[0-9]{2}\s?(?:\()[0-9]{2}(?:\))\s?[0-9]{4,5}(?:-)[0-9]{4}$/
Um exemplo de como utilizar esse Regex:
var regExp = /^(?:\+)[0-9]{2}\s?(?:\()[0-9]{2}(?:\))\s?[0-9]{4,5}(?:-)[0-9]{4}$/;
var telefone = '+55 (55) 23321-5454';
var resultado = regExp.test(telefone); (retorna true ou false)
PARA A MASCARA DO INPUT
Tente usar esse plugin, já que não existe um recurso nativo para isso.
Ao adiciona-lo no seu projeto você poderá usar um método em seu plugin, o .inputmask
e assim definir a mascara para o seu input através de uma referencia a sua classe, id ou nome de propriedade.
Segue também um teste no JSFiddle para garantir que funcione:
$("#test").inputmask({
mask: "(99)99999-9999",
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input id="test" type="text"></input>
PARA A VALIDAÇÃO DOS DADOS INSERIDOS NO INPUT
Como você mencionou nos comentários que também quer uma validação e ela não é algo lógico, ou seja, é algo que você necessita para o seu sistema e é definido por você mesmo sem lógica integrada.
Quero que haja uma validação no input onde o usuario não consiga digitar numeros que não existe como exemplo: 9999999 88888 77777 123456789 987654321 11122233 4455566888
Tente fazer a validação por um array blackList
, onde todos os elementos desse array serão testados e você tomará ação caso um desses elementos der match através de expressão regular.
Segue um exemplo:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button onclick="blackListExpressions.forEach(myFunction)">Try it</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var blackListExpressions = [/9999/, /8888/, /7777/];
var testeString = '(11)99999-9999';
function myFunction(item, index) {
if(testeString.match(item)){
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + "true" + "<br>";
}
else{
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + "false" + "<br>";
}
}
</script>
Não sei se pode te interessar, mas vou te dar uma resposta utilizando apenas a validação pelo lado do Cliente. No entanto não é possível fazer a validação de números sequencias dessa forma. O ponto positivo é que ele abre o teclado do dispositivo para a pessoa digitar o número se ela acessar pelo celular por exemplo.
No exemplo abaixo usei o <input type="tel">
exitem existem várias regras de validação direto pelo HTML (o detalhe aqui é que um usuário avançado pode entrar no Dev Tools por exemplo e apagar essas regras antes de enviar)
Primeiro eu usei um CSS para alternar a borda do caso seja válido ou inválido. Vc ainda pode usar ícones para isso ou Tooltips, vai do seu gosto e projeto...
Depois fiz as regras no <input>
pattern="[0-9]+$" //O pattern do campo só aceita números
required //o campo é de preenchimento obrigatório
minlength="9" //tem que ter no mínimo 9 números
maxlength="14" //e no máximo 14 números
Veja o exemplo funcionando.
input[type="tel"]:valid {
border: 2px solid green;
}
input[type="tel"]:invalid {
border: 2px solid red;
}
<input type="tel" id="telNo" name="telNo" pattern="[0-9]+$" required minlength="9" maxlength="14" size="30" placeholder="apenas numeros, de 9 a 14 caracteres">
Como ele é um <input>
do tipo Tel ele vai abrir o teclado do dispositivo: (além de ter a semântica correta para o tipo de campo!)
Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel