How to validate mobile and home phone?

Question

Would like to validate mobile and residential phone, adding the parentheses and trait automatically.

Cellular

What I would like:

Validate whether the cell phone contains digit 9 at the beginning and DDD (2 digits), totaling 11 digits. Therefore, validate whether it contains 11 digits.

Add parentheses automatically and dash.

(51)97654-3389

And residential:

What I would like:

Validate whether it contains the DDD (2 digits) for a total of 10 digits. Therefore, validate whether it contains 10 digits.

Add parentheses and dash automatically.

(51)3456-5043

I researched about regex but I didn’t understand 100%.

How could I do this with Javascript/jQuery?

Answer 1

You can use a regular expression.

It is a string that defines a search pattern. It is an algorithm. We can say that it is a language for localization of patterns in text. See: What is a regular expression?

Javascript has the RegExp.prototype.test(), returning true or false for its validation.

The regular expression I use to validate brazilian phones is as follows:

/^\(\d{2}\) \d{4,5}-\d{4}$/gi
{início da linha}({dois dígitos}) {de quatro a cinco dígitos}-{quatro dígitos}{fim da linha}

This expression will accept phones in the format (XX) XXXX-XXXX and (XX) XXXXX-XXXX.

To test a string against it, you can use the test():

const isValidPhone = (phone) => {
  const brazilianPhoneRegex = /^\(\d{2}\) \d{4,5}-\d{4}$/gi;
  return brazilianPhoneRegex.test(phone);
};

isValidPhone("(41) 99778-2914");
// true

isValidPhone("(411) 99778-2914");
// false

isValidPhone("(41) 9778-2914");
// true

If you want to be more permissive, I’d do it another way. It would take the input string, take out everything that is not numerical and check if it has 10 to 11 digits, which is the phone format with two-digit DDD. That would look like this:

const isValidPhone = (phone) => {
  const sanitizedPhone = phone.replace(/\D/g,'');
  return sanitizedPhone.length >= 10 && sanitizedPhone.length <= 11;
};

isValidPhone("(41) 99778-2914");
// true

isValidPhone("()41A977B8-----8319");
// true, pois tira todo caractere que não é numérico

For the mask, you can use jQuery, as you suggested. To not reinvent the wheel, there are some questions in the Stack Overflow in Portuguese that have already answered it: Phone Mask Using jQuery Mask Plugin

If you want to extend or test the regular expression, I use the site a lot Regexr.