Validating Telephone Number in RegEx in React

Question

I'm trying to validate this kind of phone number in regEx in React (044) 456-7890.

Check codesanbox here CLICK HERE

Code

const telRegExp = "(d{3})s*d{3}-d{4}";

let validateSchema = yup.object().shape({
  tel_no: yup.string().matches(telRegExp, "Telephone number is invalid")
});




  <InputMask
      mask="(999) 999 - 9999"
      onChange={handleChange}
      onBlur={handleBlur}
    >
     {() => (
       <TextField
         label="Telephone Number (Ex: (044) 878 - 3900)"
         name="tel_no"
         fullWidth
         variant="outlined"
         helperText={touched.tel_no ? errors.tel_no : ""}
         error={touched.tel_no && Boolean(errors.tel_no)}
       />
     )}
  </InputMask>

Is the sample number the exact format you want to validate for all inputs? — Tim Biegeleisen, Aug 13 '20 at 04:09
Your current regex `(d{3})s*d{3}-d{4}` is bogus, because you don't escape the metacharacters. It should be corrected to `$\d{3}$\s*\d{3}-\d{4}`. — Tim Biegeleisen, Aug 13 '20 at 04:30
@TimBiegeleisen. Tried it but same thing it still is outputting invalid — Joseph, Aug 13 '20 at 04:33
`/$\d{3}$\s*\d{3}-\d{4}/.test("(044) 456-7890")` is working. There is something wrong with JS code and how you are calling the regex API. — Tim Biegeleisen, Aug 13 '20 at 04:34
Perhaps this page can help https://stackoverflow.com/questions/123559/how-to-validate-phone-numbers-using-regex — The fourth bird, Aug 13 '20 at 08:59

rootkonda · Accepted Answer · 2020-08-13T04:40:40.423

2

^\(\d{3}\)\s\d{3}-\d{4}$

This matches the given format exactly

https://regex101.com/r/HBvG3K/6

\( and \) - To escape () characters and match literally  
\s - space character. If there can be more or no spaces then add * next to \s
\d{} - decimal numbers(0-9) followed by quantifier.

let validateSchema = yup.object().shape({
  tel_no: yup
    .string()
    .matches(
      /^\(\d{3}\)\s\d{3}\s-\s\d{4}/g,
      "Telephone number is invalid"
    )
});

edited Aug 13 '20 at 04:40

answered Aug 13 '20 at 04:15

rootkonda

1,700
1
6
11

Pls check my codesanbox. It still won't work. https://codesandbox.io/s/tel-no-regex2-q4c6x?file=/src/PhoneForm.jsx – Joseph Aug 13 '20 at 04:25
Thanks. Could you the meaning of these `/^\` and `/g` ?. – Joseph Aug 13 '20 at 04:45
`/ /g` - Thats just to enclose the regex and 'g' is a global identifier, useful when you have multiple strings to match. May not be required for you. ^ and $ represents the beginning and end of string. – rootkonda Aug 13 '20 at 04:51

score 0 · Answer 2 · answered Aug 13 '20 at 04:12

0

To validate the exact number format (044) 456-7890 I would suggest:

\(\d{3}\)\s*\d{3}-\d{4}

Demo

answered Aug 13 '20 at 04:12

Tim Biegeleisen

502,043
27
286
360

Hi! I've made it in codesandbox. Pls check it. It still won't work. Thank you. https://codesandbox.io/s/stoic-chaum-zzqof?file=/src/PhoneForm.jsx – Joseph Aug 13 '20 at 04:23
Please include your JavaScript code in the original question. There must be some other problem here. – Tim Biegeleisen Aug 13 '20 at 04:25
Ok sure just did it – Joseph Aug 13 '20 at 04:29

score 0 · Answer 3 · answered Aug 13 '20 at 04:45

0

I guess it would be better to use a real phone checking library like: https://github.com/catamphetamine/libphonenumber-js

answered Aug 13 '20 at 04:45

wookieb

4,099
1
14
17

Validating Telephone Number in RegEx in React

3 Answers3

Demo