updated and improved ip address validation

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>