From 6ed89970dcfa740225438a7fdc1b1c311006f5c3 Mon Sep 17 00:00:00 2001
From: Brandon Pittman <brandon@blp.is>
Date: Mon, 11 Sep 2023 10:15:21 +0900
Subject: [PATCH] Fix advanced Valibot example

---
 .../routes/docs/(qwikcity)/action/index.mdx   | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
index a1941fc8637..cb3be1de4f0 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
@@ -350,7 +350,7 @@ The constructor of `valibot$` can also take a function that takes a `RequestEven
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
 import { routeAction$, valibot$, Form } from '@builder.io/qwik-city';
 import styles from './styles.css?inline';
-import { string, minLength } from 'valibot';
+import { string, object, minLength } from 'valibot';
 
 export const useAddUser = routeAction$(
   async (user) => {
@@ -360,10 +360,16 @@ export const useAddUser = routeAction$(
     };
   },
   // Valibot schema is used to validate that the FormData includes "firstName" and "lastName"
-  valibot$({
-    firstName: string([minLength(1)]),
-    lastName: string([minLength(1)]),
-  })
+  valibot$((requestEvent) =>
+    object({
+      firstName: string([minLength(1)]),
+      // The last name is optional if the url contains the query parameter "lastname=optional"
+      lastName:
+        requestEvent.url.searchParams.get('lastname') === 'optional'
+          ? string()
+          : string([minLength(1)]),
+    })
+  )
 );
 
 export default component$(() => {
@@ -372,38 +378,34 @@ export default component$(() => {
 
   return (
     <Form action={action} class="flow">
-        <label>
-            <span>First name:</span>
-            <input name="firstName" />
-            <p data-status="error">
-            {action.value?.failed && (
-                <span>{action.value.nested?.firstName}</span>
-            )}
-            </p>
-        </label>
-
-        <label>
-            <span>Last name:</span>
-            <input name="lastName" />
-        </label>
+      <label>
+        <span>First name:</span>
+        <input name="firstName" />
         <p data-status="error">
-            {action.value?.failed && (
-            <span>{action.value.nested?.lastName}</span>
-            )}
+          {action.value?.failed && (
+            <span>{action.value.nested?.firstName}</span>
+          )}
         </p>
+      </label>
 
-        <button type="submit">Add user</button>
+      <label>
+        <span>Last name:</span>
+        <input name="lastName" />
+      </label>
+      <p data-status="error">
+        {action.value?.failed && <span>{action.value.nested?.lastName}</span>}
+      </p>
 
-        {action.value?.success && (
-            <p data-status="success">
-            User {action.value?.firstName} added successfully.
-            </p>
-        )}
+      <button type="submit">Add user</button>
+
+      {action.value?.success && (
+        <p data-status="success">
+          User {action.value.firstName} added successfully.
+        </p>
+      )}
     </Form>
   );
 });
-
-
 ````
 </CodeSandbox>