Validation Telephone Field

Question

Guys, I need some help from you.

I have a telephone mask, which validates the fields 00000 11111 2222 3333 in sequence.

 $('body').on('focus', '.celular', 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, '');
                    var intRegex = /[0-9 -()+]+$/;
                    if (/\d\d(\d)\1{7,8}/.test(val)) {
                        field[0].value = '';
                        notif({
                            msg: "<b>Atenção!</b> Este número está invalido!",
                            type: "error",
                            position: "center"
                        });
                    }
                }
            },
            clearIfNotMatch: true
        };
        $(this).mask(maskBehavior, options);
    });

Only I’m not getting her to validate this sequence 123456789 etc...

Could someone help me with this?

Answer 1

If you want to validate a number, use a Regular Expression. The website of Mozilla presents a excellent article on the subject, and the website Regexr is great for validating regular expressions.

In your case, if you type the number with the parentheses and strokes, the expression will be

^\\([0-9]{2}\\)((3[0-9]{3}-[0-9]{4})|(9[0-9]{3}-[0-9]{5}))$

Explaining:

• The symbol ^ indicates the beginning of a String, and $ indicates the end of a String. This means that there can be no whitespace at the beginning or end of your String. Or you can clear it using a call to the TRIM function, or you can take the $

• \\( e ) represent the specific character input ( and ). It is used because it "escapes" the character instead of making it have its normal function

• The symbol - does not need to be escaped with because it has no other function in regular expressions.

• [0-9]{2} accepts two of any value in sequence between 0 and 9 (from 00 to 99)

• ( (Expression) | (Expression) Represents a Logical OR, where it validates an expression OR another, or BOTH.

If you type without the strokes, the expression will be

^\\([0-9]{2}\\)((3[0-9]{7})|(9[0-9]{8}))$

I believe that in both cases you can assign the regular expression to a variable and initialize a Regexp, or start directly through an attribute passage to Regexp

var expressao = '^\\([0-9]{2}\\)((3[0-9]{3}-[0-9]{4})|(9[0-9]{3}-[0-9]{5}))$';
var regex = new RegExp(expressao);

OR

var regex = new RegExp('^\\([0-9]{2}\\)((3[0-9]{3}-[0-9]{4})|(9[0-9]{3}-[0-9]{5}))$');

After creating the regular expression you can validate it using the match method that regex has.

var telefone = '(31)3233-4343';
var regex = new RegExp('^\\([0-9]{2}\\)((3[0-9]{3}-[0-9]{4})|(9[0-9]{3}-[0-9]{5}))$');
regex.test(telefone);

In function form:

function validPhone (phone) {
    var regex = new RegExp('^\\([0-9]{2}\\)((3[0-9]{3}-[0-9]{4})|(9[0-9]{3}-[0-9]{5}))$');
    return regex.test(phone);
}

validPhone('(31)3534-2323'); //Valido
validPhone('(31)9923-23288'); //Valido
validPhone('(31)9923-3288'); //Invalido
validPhone('(31)2323-5443'); //Invalido

Alternatively, you can use a library that applies a mask directly in the view in a reactive way (as well as React, angular and Vue, for example, have applications) and the user would only type the numbers; it would be stored without the characters in your database or data structure, which would facilitate its manipulation, and the number would be formatted automatically only when presented to the view (ideal situation).

Example: 319938-42838 would be formatted for (31)9938-42838.

Edit: To validate a DDD between 11 and 99:

var telefone = '(31)9923-99288';
var regex = new RegExp('^\\(((1[1-9])|([2-9][0-9]))\\)((3[0-9]{3}-[0-9]{4})|(9[0-9]{3}-[0-9]{5}))$'); 
if (regex.test(telefone)) { 
    console.log("Válido");
}
else console.log("Inválido");

You can test online through of this tool.

Edit: You are using the Jquery Mask Plugin and, in it, you are cleaning the code of the parentheses and strokes used by the user, and applying the mask directly by the amount of numbers that the user has typed. Therefore, Regex will not work because it is checking for traces or parentheses.

To work this way, you can use the following method:

function validatePhone (phone) {
    var regex = new RegExp('^((1[1-9])|([2-9][0-9]))((3[0-9]{3}[0-9]{4})|(9[0-9]{3}[0-9]{5}))$'); 
    return regex.test(phone);
}

var telefone = '31992399288';
validatePhone (telefone);

In this case, the user type or not the parentheses and the dash will not modify at all the result of the code since it clears the characters that are not numbers anyway through the String filter.replace.