Update validation sample
parent
66dcba03b5
commit
c1db521ed9
|
@ -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: `
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
2467
pnpm-lock.yaml
2467
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue