feat: addendum to the form demo

Author: Ohh-889

playground/src/app/(demo)/form/modules/DemoComponents.tsx

@@ -15,9 +15,11 @@ export const DemoInput = memo(
           className="flex w-full rounded-md border border-solid border-input bg-background file:border-0 file:bg-transparent file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 h-8 px-2.5 text-sm file:py-1.25 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
           {...rest}
         />
-        {touched && <span className="text-red-500">touched</span>}
-        {validated && <span className="text-red-500">validated</span>}
-        {validating && <span className="text-red-500">validating</span>}
+        <div className='flex gap-x-4'>
+        {touched && <span className="text-blue-400">touched</span>}
+        {validated && <span className="text-red-400">validated</span>}
+        {validating && <span className="text-yellow-400">validating</span>}
+       </div>
       </>
     );
   },

playground/src/app/(demo)/form/modules/validate.tsx

@@ -10,14 +10,33 @@ import { showToastCode } from './toast';
 
 type Inputs = {
   age: number;
+  bio: string;
+  birthday: string;
+  favoriteColor: string;
+  nickname: string;
+  password: string;
+  password2: string;
+  pin: string;
+  role: string;
   username: string;
+  username2: string;
+  website: string;
+  workEmail: string;
 };
 
 const Validate = () => {
   const [form] = useForm<Inputs>();
 
   const errors = useFieldError(form);
 
+  function validateNickname() {
+    form.validateField('nickname');
+  }
+
+  function validateUsername2() {
+    form.validateField('username2');
+  }
+
   useEffect(() => {
     showToastCode('all Errors', errors);
   }, [errors]);
@@ -266,7 +285,21 @@ const Validate = () => {
           />
         </FormField>
 
-        <Button type="submit">Submit</Button>
+        <div className="flex gap-x-4">
+          <Button
+            type="button"
+            onClick={validateNickname}
+          >
+            Validate Nickname
+          </Button>
+          <Button
+            type="button"
+            onClick={validateUsername2}
+          >
+            Validate Username2
+          </Button>
+          <Button type="submit">Submit</Button>
+        </div>
       </Form>
     </Card>
   );