consegna di tutto il form

ardoino_matteo/TPSI/SvelteForm/src/routes/+page.server.js

@@ -19,12 +19,19 @@ export const actions = {
         const data = await request.formData();
         console.log("I VALORI DEL FORM SONO:", data);
 
-        utenti.push(
-            {
-                nome: data.get('nome'),
-                cognome: data.get('cognome'),
-                eta: data.get('eta')
+        const user = {
+            nome: data.get("nome"),
+            cognome: data.get("cognome"),
+            eta: data.get("eta"),
+
+        }
+        if (user.nome && user.cognome && user.eta) {
+            utenti.push(user);
+        }else {
+            return {
+                form_error: true,
+                form_vals: user
             }
-        )
+        }
     }
 };

ardoino_matteo/TPSI/SvelteForm/src/routes/+page.svelte

@@ -1,18 +1,30 @@
 <script>
     export let data; // riceve i dati forniti dal backend durante il load della pagina
+    export let form;
+    let nome,cognome,eta;
+    let error = false;
+
+if(form?.form_error) {
+    error = true;
+    nome = form.form_vals.cognome;
+    cognome = form.form_vals.cognome;
+    eta = form.form_vals.eta;
+}
+
 </script>
-<h1>Hi welcome to svelte kit</h1>
 
 <form method="POST">
     <div><label for="nome">Nome</label></div>
-    <div><input type="text" id="nome" name="nome" size="40"/></div>
-
+    <div><input type="text" id="nome" name="nome" size="40" bind:value={nome}/>
+    <p class={error && nome?.length == 0? '': 'hidden'}>Nome Invalido</p></div>
+
     <div><label for="cognome">Cognome</label></div>
-    <div><input type="text" id="cognome" name="cognome" size="40"/></div>
-
+    <div><input type="text" id="cognome" name="cognome" size="40" bind:value={cognome}/>
+        <p class={error && cognome?.length == 0? '': 'hidden'}>Cognome Invalido</p></div>
+
     <div><label for="eta">Età</label></div>
-    <div><input type="number" id="eta" name="eta" min="15"/></div>
-
+    <div><input type="number" id="eta" name="eta" min="15" bind:value={eta}/>
+    <p class={error && eta?.length == 0? '': 'hidden'}>Eta Invalido</p></div>
     <div><input type="submit" value="Invia"></div>
 </form>
 
@@ -36,5 +48,11 @@
     label {
         line-height: 25px;
     }
+     p{
+        color:red;
+        font-weight: bold;
+     }
+     .hidden {
+        display: none;
+     }
 </style>
-