Forms doc updates

pull/6632/head
tugcekucukoglu 2024-10-23 14:59:52 +03:00
parent 3f2510ed18
commit 90c7b0d6aa
6 changed files with 20 additions and 20 deletions

View File

@ -34,7 +34,7 @@
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -91,7 +91,7 @@ export default {
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -126,7 +126,7 @@ export default {
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

View File

@ -5,8 +5,8 @@
<div class="card flex justify-center">
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full">
<div class="flex flex-col justify-center items-center gap-4">
<InputText name="username" type="text" placeholder="Username" />
<Button type="submit" severity="secondary" label="Submit" />
<InputText name="username" type="text" placeholder="Username" fluid class="sm:w-56" />
<Button type="submit" severity="secondary" label="Submit" fluid class="sm:w-56" />
</div>
<Fieldset legend="Form States">
<pre class="whitespace-pre-wrap">{{ $form }}</pre>

View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<Password name="password" placeholder="Password" :feedback="false" fluid />
@ -56,7 +56,7 @@ export default {
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<Password name="password" placeholder="Password" :feedback="false" fluid />
@ -74,7 +74,7 @@ export default {
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<Password name="password" placeholder="Password" :feedback="false" fluid />

View File

@ -9,15 +9,15 @@
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @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" 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.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="name" type="text" placeholder="Name" fluid />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.errors[0]?.message }}</Message>
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="surname" type="text" placeholder="Surname" fluid />
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.errors[0]?.message }}</Message>
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -39,15 +39,15 @@ export default {
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @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" 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.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="name" type="text" placeholder="Name" fluid />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.errors[0]?.message }}</Message>
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="surname" type="text" placeholder="Surname" fluid />
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.errors[0]?.message }}</Message>
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -57,7 +57,7 @@ export default {
<Form v-slot="$form" :initialValues :resolver @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" 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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

View File

@ -3,7 +3,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @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" 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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

View File

@ -4,7 +4,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -44,7 +44,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -55,7 +55,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -107,7 +107,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<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.error.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>