src/components/SettingForms/System/SystemConfigFields.tsx

@@ -5,6 +5,8 @@ import { timezones } from "./timezones";
 import SystemFileUpload from "./SystemFileUpload";
 import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast } from "sonner";
 
 const SystemConfigFields = () => {
   const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
@@ -35,6 +37,14 @@ const SystemConfigFields = () => {
     if (!values.timeZone) errors.timeZone = "Required";
     if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
     if (!values.sntpServer) errors.sntpServer = "Required";
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+    }
     return errors;
   };
 
@@ -52,7 +62,7 @@ const SystemConfigFields = () => {
       onSubmit={handleSubmit}
       validate={validateValues}
       enableReinitialize
-      validateOnChange
+      validateOnChange={false}
       validateOnBlur
     >
       {({ values, errors, touched, isSubmitting }) => (

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -35,6 +35,14 @@ const ModemSettings = () => {
   };
 
   const handleSubmit = async (values: ModemSettingsType) => {
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+      return;
+    }
     const modemConfig = {
       id: "ModemAndWifiManager-modem",
       fields: [
@@ -68,7 +76,7 @@ const ModemSettings = () => {
 
     const response = await modemMutation.mutateAsync(modemConfig);
 
-    if (response?.id) {
+    if (!response?.id) {
       toast.success("Modem settings updated successfully", {
         id: "modemSettings",
       });
@@ -138,7 +146,6 @@ const ModemSettings = () => {
                     id="serverPrimary"
                     type="text"
                     className="p-1.5 border border-gray-400 rounded-lg"
-                    validate={ValidateIPaddress}
                   />
                 </FormGroup>
                 <FormGroup>
@@ -151,7 +158,6 @@ const ModemSettings = () => {
                     id="serverSecondary"
                     type="text"
                     className="p-1.5 border border-gray-400 rounded-lg"
-                    validate={ValidateIPaddress}
                   />
                 </FormGroup>
                 <FormGroup>

src/utils/utils.ts

@@ -185,15 +185,13 @@ export const reverseZoomMapping = (magnification: string) => {
   }
 };
 
-export function ValidateIPaddress(ipaddress: string) {
+export const ValidateIPaddress = (value: string | undefined) => {
-  if (!ipaddress) {
+  if (!value) return;
-    return undefined;
+
-  } else if (
+  const regex =
-    !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+    /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
-      ipaddress
+
-    )
+  if (!regex.test(value)) {
-  ) {
+    return "Invalid IP address format";
-    return "Invalid IP";
-  }
-  return undefined;
   }
+};