Fix form validation

wkktoria · Jan 16, 2025 · 71363a9 · 71363a9
1 parent eb29652
commit 71363a9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/404.html b/404.html
@@ -41,7 +41,6 @@
     } else {
         document.body.classList.remove("dark-mode");
     }
-    console.log(getCookie("IsDarkMode"));
 </script>
 <script src="_framework/blazor.webassembly.js"></script>
 <script src="_content/MudBlazor/MudBlazor.min.js"></script>
@@ -54,11 +53,26 @@
 
         document.getElementById('contact-form').addEventListener('submit', async function (event) {
             event.preventDefault();
-            await emailjs.sendForm('service_4uw82xw', 'template_fy4oy5t', '#contact-form', this).then(() => {
-                document.getElementById('contact-form').reset();
-            });
+
+            if (isFormValid()) {
+                await emailjs.sendForm('service_4uw82xw', 'template_fy4oy5t', '#contact-form', this).then(() => {
+                    document.getElementById('contact-form').reset();
+                });
+            }
         });
     }
+
+    function isFormValid() {
+        const form = document.getElementById('contact-form');
+        const name = form['user_name'].value;
+        const email = form['user_email'].value;
+        const message = form['message'].value;
+
+        const emailRegex = /^\S+@\S+\.\S+$/;
+        const isEmailValid = emailRegex.test(email);
+
+        return name.length >= 3 && isEmailValid && message.length >= 10;
+    }
 </script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -41,7 +41,6 @@
     } else {
         document.body.classList.remove("dark-mode");
     }
-    console.log(getCookie("IsDarkMode"));
 </script>
 <script src="_framework/blazor.webassembly.js"></script>
 <script src="_content/MudBlazor/MudBlazor.min.js"></script>
@@ -54,11 +53,26 @@
 
         document.getElementById('contact-form').addEventListener('submit', async function (event) {
             event.preventDefault();
-            await emailjs.sendForm('service_4uw82xw', 'template_fy4oy5t', '#contact-form', this).then(() => {
-                document.getElementById('contact-form').reset();
-            });
+
+            if (isFormValid()) {
+                await emailjs.sendForm('service_4uw82xw', 'template_fy4oy5t', '#contact-form', this).then(() => {
+                    document.getElementById('contact-form').reset();
+                });
+            }
         });
     }
+
+    function isFormValid() {
+        const form = document.getElementById('contact-form');
+        const name = form['user_name'].value;
+        const email = form['user_email'].value;
+        const message = form['message'].value;
+
+        const emailRegex = /^\S+@\S+\.\S+$/;
+        const isEmailValid = emailRegex.test(email);
+
+        return name.length >= 3 && isEmailValid && message.length >= 10;
+    }
 </script>
 </body>
 </html>