Merge pull request #3 from Clubs-Council-IIITH/phonenumbers

Use phonenumber lib instead of regex for phone number validation
Clubs-Council-IIITH · Mar 24, 2024 · afab23e · afab23e
2 parents e27e70d + 261ee59
commit afab23e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -31,6 +31,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jwt-decode": "^4.0.0",
+    "libphonenumber-js": "^1.10.58",
     "next": "^14.1.0",
     "next-mdx-remote": "^4.4.1",
     "nprogress": "^0.2.0",

diff --git a/web/src/components/profile/UserForm.jsx b/web/src/components/profile/UserForm.jsx
@@ -10,6 +10,10 @@ import { useToast } from "components/Toast";
 
 import { LoadingButton } from "@mui/lab";
 import { Button, Grid, TextField, Typography } from "@mui/material";
+import {
+  isValidPhoneNumber,
+  parsePhoneNumberWithError,
+} from "libphonenumber-js";
 
 import FileUpload from "components/FileUpload";
 import ConfirmDialog from "components/ConfirmDialog";
@@ -148,10 +152,20 @@ export default function UserForm({ defaultValues = {}, action = "log" }) {
                   name="phone"
                   control={control}
                   rules={{
-                    pattern: {
-                      value:
-                        /(\+\d{1,3}\s?)?((\(\d{3}\)\s?)|(\d{3})(\s|-?))(\d{3}(\s|-?))(\d{4})(\s?(([E|e]xt[:|.|]?)|x|X)(\s?\d+))?/g,
-                      message: "Invalid phone number!",
+                    validate: {
+                      checkPhoneNumber: (value) => {
+                        if (!value || value === "") return true;
+                        try {
+                          const phoneNumber = parsePhoneNumberWithError(value, {
+                            defaultCountry: "IN",
+                          });
+                          return (
+                            isValidPhoneNumber(value, "IN") || "Invalid Phone Number!"
+                          );
+                        } catch (error) {
+                          return error.message;
+                        }
+                      },
                     },
                   }}
                   render={({ field, fieldState: { error, invalid } }) => (