form fix!

src/lib/elements/Form.svelte

@@ -4,15 +4,47 @@
 	let email = "";
 	let message = "";
 	let notify;
+    let error;
+
+    const validateEmail = (email) => {
+    return String(email)
+        .toLowerCase()
+        .match(
+        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+        );
+    };
+
+    $: allowSend = validate(email, message);
+
+    function validate(email, message) {
+        if(email == "" || message == "") {
+            error = null;
+            return false;
+        }
+
+        if(!validateEmail(email)) {
+            error = "Invalid email format!";
+            return false;
+        }
+
+        if(message.length < 10) {
+            error = "Message body too short!";
+            return false;
+        }
+
+        error = null;
+        return true;
+    }
 
 	function send() {
-		email = "";
+        email = "";
 		message = "";
 		notify = "Email sent!";
+        return;
 	}
 </script>
 
-<main class="flex flex-col gap-5 w-2/3 mx-auto">
+<main class="flex flex-col gap-5 lg:w-2/3 mx-auto">
     <form
         class="flex flex-col gap-5"
         action="https://api.staticforms.xyz/submit"
@@ -24,7 +56,7 @@
             value="534c3443-4fa9-41bc-976b-684b3049bef3"
         />
         <input type="text" name="honeypot" style="display: none;" />
-        <input type="hidden" name="redirectTo" value={variables.appUrl} />
+        <input type="hidden" name="redirectTo" value={variables.appUrl + "/contact"} />
 
         <div class="flex flex-col">
             <label for="email" value="E-Mail" class="text-lg font-bold"
@@ -53,10 +85,9 @@
         </div>
 
         <div class="flex flex-col">
-            {#if email != "" && message != ""}
+            {#if allowSend}
                 <button
                     type="submit"
-                    on:click={send}
                     class="bg-gradient-to-tr from-red-500 to-pink-500 py-2 px-3 rounded-lg font-bold shadow button"
                     >Send</button
                 >
@@ -64,7 +95,6 @@
                 <button
                     disabled
                     type="none"
-                    on:click={send}
                     title="Fill in the fields before submitting"
                     class="bg-black bg-opacity-50 py-2 px-3 rounded-lg font-bold shadow text-gray-400"
                 >
@@ -76,6 +106,9 @@
         {#if notify}
             <p class="text-green-500 font-bold text-lg">{notify}</p>
         {/if}
+        {#if error != undefined && error != null}
+            <p class="text-red-500 font-bold text-lg">{error}</p>
+        {/if}
     </form>
 </main>