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> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card flex justify-center"> <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"> <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> <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <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> <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -31,8 +31,8 @@ export default {
}, },
resolver: null, resolver: null,
schema: z.object({ schema: z.object({
username: z.string().min(1, { message: 'Please enter your username.' }), username: z.string().min(1, { message: 'Username is required.' }),
email: z.string().min(1, { message: 'Please enter your email.' }).email({ message: 'Email must be valid.' }) email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' })
}), }),
code: { code: {
basic: ` basic: `

View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <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> <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -33,7 +33,7 @@ export default {
resolver: null, resolver: null,
schema: z.object({ schema: z.object({
city: z.object({ city: z.object({
name: z.string().min(1, 'City should be selected.') name: z.string().min(1, 'City is required.')
}) })
}), }),
code: { code: {

File diff suppressed because it is too large Load Diff