Added new input validation and messages
This commit is contained in:
224
ui/src/components/application/ApplicationForm.vue
Normal file
224
ui/src/components/application/ApplicationForm.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import Input from '@/components/ui/input/Input.vue';
|
||||
import Label from '@/components/ui/label/Label.vue';
|
||||
import Textarea from '@/components/ui/textarea/Textarea.vue';
|
||||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import { Form } from 'vee-validate';
|
||||
import * as z from 'zod';
|
||||
|
||||
const formSchema = toTypedSchema(z.object({
|
||||
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({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
|
||||
hobbies: z.string(),
|
||||
military: z.boolean(),
|
||||
communities: z.string(),
|
||||
joinReason: z.string(),
|
||||
milsimAttraction: z.string(),
|
||||
referral: z.string(),
|
||||
steamProfile: z.string(),
|
||||
timezone: z.string(),
|
||||
canAttendSaturday: z.boolean(),
|
||||
interests: z.string(),
|
||||
aknowledgeRules: z.literal(true, {
|
||||
errorMap: () => ({ message: "Required" })
|
||||
}),
|
||||
}))
|
||||
|
||||
function onSubmit(val) {
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Name -->
|
||||
<FormField name="name" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>What name will you be going by within the community?</FormLabel>
|
||||
<FormDescription>This name must be consistent across platforms.</FormDescription>
|
||||
<FormControl>
|
||||
<Input v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Playtime -->
|
||||
<FormField name="playtime" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>How long have you played Arma 3 for (in hours)?</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Hobbies -->
|
||||
<FormField name="hobbies" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>What hobbies do you like to participate in outside of gaming?</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="4" class="resize-none" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Military (boolean) -->
|
||||
<FormField name="military" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Have you ever served in the military?</FormLabel>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox :checked="value ?? false" @update:checked="handleChange" />
|
||||
<span>Yes (checked) / No (unchecked)</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Other communities (freeform) -->
|
||||
<FormField name="communities" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>Are you a part of any other communities? If so, which ones? If none, type "No"</FormLabel>
|
||||
<FormControl>
|
||||
<Input v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Why join -->
|
||||
<FormField name="joinReason" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>Why do you want to join our community?</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="4" class="resize-none" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Attraction to milsim -->
|
||||
<FormField name="milsimAttraction" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>What attracts you to the Arma 3 milsim playstyle?</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="4" class="resize-none" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Referral (freeform) -->
|
||||
<FormField name="referral" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>Where did you hear about us? (If another member, who?)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g., Reddit / Member: Alice" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Steam profile -->
|
||||
<FormField name="steamProfile" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>Steam profile link</FormLabel>
|
||||
<FormDescription>
|
||||
Format: <code>https://steamcommunity.com/id/USER/</code> or
|
||||
<code>https://steamcommunity.com/profiles/STEAMID64/</code>
|
||||
</FormDescription>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Timezone -->
|
||||
<FormField name="timezone" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>What time zone are you in?</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g., AEST, EST, UTC+10" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Attendance (boolean) -->
|
||||
<FormField name="canAttendSaturday" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Are you able to attend weekly operations Saturdays @ 7pm CST?</FormLabel>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox :checked="value ?? false" @update:checked="handleChange" />
|
||||
<span>Yes (checked) / No (unchecked)</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Interests / Playstyle (freeform) -->
|
||||
<FormField name="interests" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>Which playstyles interest you?</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g., Rifleman; Medic; Pilot" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Code of Conduct (boolean, field name kept as-is) -->
|
||||
<FormField name="aknowledgeRules" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Community Code of Conduct</FormLabel>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<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>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<div class="pt-2">
|
||||
<Button type="submit" :onClick="() => console.log('hi')">Submit Application</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
Reference in New Issue
Block a user