Added new input validation and messages

ui/src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router';
 import Separator from './components/ui/separator/Separator.vue';
-import Application from './pages/ApplicationForm.vue';
+import Application from './components/application/ApplicationForm.vue';
 import Button from './components/ui/button/Button.vue';
 </script>
 

ui/src/components/application/ApplicationForm.vue

@@ -17,9 +17,9 @@ import { Form } from 'vee-validate';
 import * as z from 'zod';
 
 const formSchema = toTypedSchema(z.object({
-    age: z.coerce.number().min(0),
+    age: z.coerce.number({ invalid_type_error: "Must be a number" }).min(0, "Cannot be less than 0"),
     name: z.string(),
-    playtime: z.coerce.number().min(0),
+    playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
     hobbies: z.string(),
     military: z.boolean(),
     communities: z.string(),
@@ -30,7 +30,9 @@ const formSchema = toTypedSchema(z.object({
     timezone: z.string(),
     canAttendSaturday: z.boolean(),
     interests: z.string(),
-    aknowledgeRules: z.boolean(),
+    aknowledgeRules: z.literal(true, {
+        errorMap: () => ({ message: "Required" })
+    }),
 }))
 
 function onSubmit(val) {
@@ -40,13 +42,19 @@ function onSubmit(val) {
 </script>
 
 <template>
-  <Form :validation-schema="formSchema" @submit="onSubmit" class="space-y-6 max-w-3xl mx-auto my-20">
+  <Form :validation-schema="formSchema"
+  :initial-values="{
+    military: false,
+    canAttendSaturday: false,
+    aknowledgeRules: false,
+  }"
+   @submit="onSubmit" class="space-y-6 max-w-3xl mx-auto my-20">
     <!-- Age -->
     <FormField name="age" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>What is your age?</FormLabel>
         <FormControl>
-          <Input type="number" v-bind="componentField" />
+          <Input v-bind="componentField" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -92,7 +100,7 @@ function onSubmit(val) {
         <FormLabel>Have you ever served in the military?</FormLabel>
         <FormControl>
           <div class="flex items-center gap-2">
-            <Checkbox :checked="value" @update:checked="handleChange" />
+            <Checkbox :checked="value ?? false" @update:checked="handleChange" />
             <span>Yes (checked) / No (unchecked)</span>
           </div>
         </FormControl>
@@ -176,7 +184,7 @@ function onSubmit(val) {
         <FormLabel>Are you able to attend weekly operations Saturdays @ 7pm CST?</FormLabel>
         <FormControl>
           <div class="flex items-center gap-2">
-            <Checkbox :checked="value" @update:checked="handleChange" />
+            <Checkbox :checked="value ?? false" @update:checked="handleChange" />
             <span>Yes (checked) / No (unchecked)</span>
           </div>
         </FormControl>
@@ -201,7 +209,7 @@ function onSubmit(val) {
         <FormLabel>Community Code of Conduct</FormLabel>
         <FormControl>
           <div class="flex items-center gap-2">
-            <Checkbox :checked="value" @update:checked="handleChange" />
+            <Checkbox :checked="value" @update:model-value="handleChange" />
             <span>By checking this box, you accept the <Button variant="link" class="p-0">Code of Conduct</Button>.</span>
           </div>
         </FormControl>
@@ -210,7 +218,7 @@ function onSubmit(val) {
     </FormField>
 
     <div class="pt-2">
-      <Button type="submit" class="w-full">Submit Application</Button>
+      <Button type="submit" :onClick="() => console.log('hi')">Submit Application</Button>
     </div>
   </Form>
 </template>