Update validation sample

pull/6632/head
Cagatay Civici 2024-10-22 10:31:29 +03:00
parent 66dcba03b5
commit c1db521ed9
3 changed files with 1244 additions and 1245 deletions

View File

@ -1,18 +1,18 @@
<template>
<DocSectionText v-bind="$attrs">
<p>InputText is used with the <i>v-model</i> property.</p>
<p>InputText can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputText name="username" type="text" placeholder="Username" />
<InputText name="username" type="text" placeholder="Username" fluid />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="email" type="text" placeholder="Email" />
<InputText name="email" type="text" placeholder="Email" fluid />
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
<DocSectionCode :code="code" />
@ -31,8 +31,8 @@ export default {
},
resolver: null,
schema: z.object({
username: z.string().min(1, { message: 'Please enter your username.' }),
email: z.string().min(1, { message: 'Please enter your email.' }).email({ message: 'Email must be valid.' })
username: z.string().min(1, { message: 'Username is required.' }),
email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' })
}),
code: {
basic: `

View File

@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
<Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
<DocSectionCode :code="code" />
@ -33,7 +33,7 @@ export default {
resolver: null,
schema: z.object({
city: z.object({
name: z.string().min(1, 'City should be selected.')
name: z.string().min(1, 'City is required.')
})
}),
code: {

File diff suppressed because it is too large Load Diff