You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.9 KiB
111 lines
2.9 KiB
/**
|
|
* VeeValidate Form Validation Composable
|
|
*
|
|
* Provides convenient setup for VeeValidate with Zod schemas and
|
|
* German error messages.
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <script setup lang="ts">
|
|
* import { z } from 'zod'
|
|
* import { useForm } from 'vee-validate'
|
|
* import { toTypedSchema } from '@vee-validate/zod'
|
|
*
|
|
* // Define Zod schema
|
|
* const checkoutSchema = z.object({
|
|
* street: z.string().min(3, 'Straße muss mindestens 3 Zeichen lang sein'),
|
|
* postCode: z.string().regex(/^\d{5}$/, 'Ungültige Postleitzahl'),
|
|
* city: z.string().min(2),
|
|
* })
|
|
*
|
|
* // Setup form with validation
|
|
* const { handleSubmit, errors, defineField } = useForm({
|
|
* validationSchema: toTypedSchema(checkoutSchema),
|
|
* })
|
|
*
|
|
* // Define fields
|
|
* const [street, streetAttrs] = defineField('street')
|
|
* const [postCode, postCodeAttrs] = defineField('postCode')
|
|
*
|
|
* // Submit handler
|
|
* const onSubmit = handleSubmit(async (values) => {
|
|
* console.log('Form values:', values)
|
|
* })
|
|
* </script>
|
|
*
|
|
* <template>
|
|
* <form @submit="onSubmit">
|
|
* <input v-model="street" v-bind="streetAttrs" />
|
|
* <span v-if="errors.street">{{ errors.street }}</span>
|
|
* </form>
|
|
* </template>
|
|
* ```
|
|
*/
|
|
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import type { z } from 'zod'
|
|
|
|
/**
|
|
* Configure VeeValidate with Zod schema
|
|
*
|
|
* This is a convenience wrapper around toTypedSchema from @vee-validate/zod
|
|
* that provides type-safe form validation with Zod schemas.
|
|
*
|
|
* @param schema - Zod schema for form validation
|
|
* @returns Typed schema for VeeValidate
|
|
*
|
|
* @example
|
|
* const validationSchema = useZodSchema(checkoutSchema)
|
|
* const form = useForm({ validationSchema })
|
|
*/
|
|
export function useZodSchema<T extends z.ZodTypeAny>(schema: T) {
|
|
return toTypedSchema(schema)
|
|
}
|
|
|
|
/**
|
|
* Check if a form field has an error
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @param fieldName - Field name to check
|
|
* @returns true if field has an error
|
|
*/
|
|
export function hasFieldError(
|
|
errors: Record<string, string | undefined>,
|
|
fieldName: string
|
|
): boolean {
|
|
return !!errors[fieldName]
|
|
}
|
|
|
|
/**
|
|
* Get error message for a field
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @param fieldName - Field name to get error for
|
|
* @returns Error message or empty string
|
|
*/
|
|
export function getFieldError(
|
|
errors: Record<string, string | undefined>,
|
|
fieldName: string
|
|
): string {
|
|
return errors[fieldName] || ''
|
|
}
|
|
|
|
/**
|
|
* Check if form is valid (no errors)
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @returns true if form has no errors
|
|
*/
|
|
export function isFormValid(errors: Record<string, string | undefined>): boolean {
|
|
return Object.keys(errors).length === 0
|
|
}
|
|
|
|
/**
|
|
* Get all error messages as an array
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @returns Array of error messages
|
|
*/
|
|
export function getAllErrors(errors: Record<string, string | undefined>): string[] {
|
|
return Object.values(errors).filter((error): error is string => !!error)
|
|
}
|
|
|