Validation for Phone type field

I use the jQuery mask plugin to manage my masks.

Code

I just adapted the ending to validate your need.

$(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){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><scriptsrc="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>

<input type="text" placeholder="Telefone" name="phone" class="phone"/>

Explanation

var maskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
}

This part checks whether it will be 9 or 8 digits and formats the mask the correct way.

options = {
    onKeyPress: function(val, e, field, options) {
        field.mask(maskBehavior.apply({}, arguments), options);

Applies the previous rule whenever a key is pressed.

if(field[0].value.length >= 14){
    var val = field[0].value.replace(/\D/g, '');
    if(/\d\d(\d){7,8}/.test(val)){
        field[0].value = '';
        alert('Telefone Invalido');
    }
}

Here's what you want, when content is longer than 14 characters, check the content.

• var val = field[0].value.replace(/\D/g, ''); - removes anything other than a digit (just to facilitate).
• /\d\d(\d){7,8}/ - equal sequential validation, ignores the DDD, if the digits are all equal.
• {7,8} - refers to the previous catch, which should repeat 7 to 8 times

If all this is valid, then it performs the if that invalidates the content.

FOR THE INPUT MASK

Try using this plugin , since there is no native resource for this.

By adding it to your project you can use a method in your plugin, .inputmask and thus set the mask for your input through a reference to your class , id , or property name .

Also check out JSFiddle to make sure it works:

$("#test").inputmask({
            mask: "(99)99999-9999",
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input id="test" type="text"></input>

FOR VALIDATION OF DATA INSERTED IN INPUT

As you mentioned in the comments you also want a validation and it is not something logical, that is, it is something that you need for your system and is defined by yourself without integrated logic.

  

I want to have a validation in the input where the user can not enter numbers that do not exist as an example: 9999999 88888 77777 123456789 987654321 11122233 4455566888

Try to validate with a blackList array, where all elements of this array will be tested and you will take action if one of these elements matches through regular expression.

Here's an example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><buttononclick="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>

No. The most that can be done is a Regex that validates the format of the text placed for the phone. For example, the below validates the following formats with country code, DDD and telephone with 8 or 9 digits + XX (XX) XXXX-XXXX or + XX (XX) XXXXX-XXXX

/^(?:\+)[0-9]{2}\s?(?:\()[0-9]{2}(?:\))\s?[0-9]{4,5}(?:-)[0-9]{4}$/

An example of how to use this 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)

I do not know if it might interest you, but I'll give you an answer using only validation from the Customer side. However it is not possible to validate sequence numbers in this way. The good thing is that it opens the device keyboard so that the person can type the number if he or she accesses the cell for example.

In the example below I used <input type="tel"> There are several rules of direct validation through the HTML (the detail here is that an advanced user can enter Dev Tools for example and delete these rules before sending)

First I used a CSS to switch the border of the case to be valid or invalid. You can still use icons for it or Tooltips, it goes of your taste and design ...

Then I made the rules in <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

See the example working.

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">

Since it is a <input> of type Tel it will open the device keyboard: (in addition to having the correct semantics for the type of field!)

Source: link