vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Form validation example updates

pull/3774/head
Tuğçe Küçükoğlu 2023-03-20 13:38:06 +03:00
parent c317262830
commit f76b40cb06
23 changed files with 117 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/chips/form/VeeValidateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card">
<div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small id="chips-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
@ -44,7 +44,7 @@ export default {
code: {
basic: `
<template>
<div class="card">
<div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
@ -55,7 +55,7 @@ export default {
</template>`,
options: `
<template>
<div class="card">
<div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
@ -96,7 +96,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card">
<div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>

8
doc/inputswitch/form/VeeValidateDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>I've read and accept the terms & conditions.</div>
<InputSwitch v-model="value" aria-describedby="text-error" />
<InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -48,7 +48,7 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>I've read and accept the terms & conditions.</div>
<InputSwitch v-model="value" aria-describedby="text-error" />
<InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -59,7 +59,7 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>I've read and accept the terms & conditions.</div>
<InputSwitch v-model="value" aria-describedby="text-error" />
<InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -101,7 +101,7 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>I've read and accept the terms & conditions.</div>
<InputSwitch v-model="value" aria-describedby="text-error" />
<InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>

8
doc/knob/form/VeeValidateDoc.vue
View File

@ -3,7 +3,7 @@
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<Knob v-model="value" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
@ -24,7 +24,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'The value must be greater than zero.';
}
return true;
@ -76,7 +76,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'The value must be greater than zero.';
}
return true;
@ -115,7 +115,7 @@ const toast = useToast();
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'The value must be greater than zero.';
}
return true;

28
doc/listbox/form/VeeValidateDoc.vue
View File

@ -3,8 +3,8 @@
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
<Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -24,7 +24,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'City is required.';
}
return true;
@ -52,9 +52,9 @@ export default {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
<Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -63,9 +63,9 @@ export default {
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
<Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -84,7 +84,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'City is required.';
}
return true;
@ -115,9 +115,9 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
<Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -142,7 +142,7 @@ const cities = [
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'City is required.';
}
return true;

22
doc/multiselect/form/VeeValidateDoc.vue
View File

@ -3,8 +3,8 @@
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -24,7 +24,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'City is required.';
}
return true;
@ -58,8 +58,8 @@ export default {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -69,8 +69,8 @@ export default {
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -90,7 +90,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'City is required.';
}
return true;
@ -127,8 +127,8 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
@ -154,7 +154,7 @@ const cities = [
function validateField(value) {
if (!value) {
return 'Value is required.';
return 'City is required.';
}
return true;

1
doc/password/form/VeeValidateDoc.vue
View File

@ -6,7 +6,6 @@
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="value">Password</label>
<Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>

8
doc/radiobutton/form/VeeValidateDoc.vue
View File

@ -24,7 +24,7 @@
</div>
</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
@ -83,7 +83,7 @@ export default {
</div>
</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>`,
@ -111,7 +111,7 @@ export default {
</div>
</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -170,7 +170,7 @@ export default {
</div>
</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>

8
doc/selectbutton/form/VeeValidateDoc.vue
View File

@ -6,7 +6,7 @@
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
@ -48,7 +48,7 @@ export default {
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -59,7 +59,7 @@ export default {
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -105,7 +105,7 @@ export default {
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />

22
doc/textarea/form/VeeValidateDoc.vue
View File

@ -5,8 +5,8 @@
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</span>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
@ -26,7 +26,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Name - Surname is required.';
return 'Description is required.';
}
return true;
@ -48,8 +48,8 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</span>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
@ -61,8 +61,8 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</span>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
@ -82,7 +82,7 @@ export default {
function validateField(value) {
if (!value) {
return 'Name - Surname is required.';
return 'Description is required.';
}
return true;
@ -104,8 +104,8 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</span>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
@ -124,7 +124,7 @@ const toast = useToast();
function validateField(value) {
if (!value) {
return 'Name - Surname is required.';
return 'Description is required.';
}
return true;

24
doc/togglebutton/form/VeeValidateDoc.vue
View File

@ -3,9 +3,9 @@
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column gap-2">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
@ -44,18 +44,18 @@ export default {
code: {
basic: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column gap-2">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column gap-2">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -94,9 +94,9 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<form @submit="onSubmit" class="flex flex-column gap-2">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />

20
doc/treeselect/form/VeeValidateDoc.vue
View File

@ -4,9 +4,8 @@
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
@ -47,9 +46,8 @@ export default {
basic: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>`,
@ -57,9 +55,8 @@ export default {
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -107,9 +104,8 @@ export default {
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />

16
doc/tristatecheckbox/form/VeeValidateDoc.vue
View File

@ -5,8 +5,8 @@
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div class="my-2">* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
@ -47,8 +47,8 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div class="my-2">* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>`,
@ -57,8 +57,8 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div class="my-2">* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
@ -98,8 +98,8 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div class="my-2">* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />

4
pages/inputswitch/index.vue
View File

@ -6,11 +6,11 @@
import AccessibilityDoc from '@/doc/inputswitch/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputswitch/BasicDoc.vue';
import DisabledDoc from '@/doc/inputswitch/DisabledDoc.vue';
import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/inputswitch/ImportDoc.vue';
import InvalidDoc from '@/doc/inputswitch/InvalidDoc.vue';
import PreselectionDoc from '@/doc/inputswitch/PreselectionDoc.vue';
import StyleDoc from '@/doc/inputswitch/StyleDoc.vue';
import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
export default {
data() {
@ -47,7 +47,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/knob/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/knob/AccessibilityDoc.vue';
import BasicDoc from '@/doc/knob/BasicDoc.vue';
import ColorDoc from '@/doc/knob/ColorDoc.vue';
import DisabledDoc from '@/doc/knob/DisabledDoc.vue';
import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/knob/ImportDoc.vue';
import MinMaxDoc from '@/doc/knob/MinMaxDoc.vue';
import ReactiveDoc from '@/doc/knob/ReactiveDoc.vue';
@ -16,7 +17,6 @@ import StepDoc from '@/doc/knob/StepDoc.vue';
import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
import StyleDoc from '@/doc/knob/StyleDoc.vue';
import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
export default {
data() {
return {
@ -82,7 +82,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/listbox/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc';
import BasicDoc from '@/doc/listbox/BasicDoc';
import DisabledDoc from '@/doc/listbox/DisabledDoc';
import FilterDoc from '@/doc/listbox/FilterDoc';
import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
import GroupDoc from '@/doc/listbox/GroupDoc';
import ImportDoc from '@/doc/listbox/ImportDoc';
import InvalidDoc from '@/doc/listbox/InvalidDoc';
@ -14,7 +15,6 @@ import MultipleDoc from '@/doc/listbox/MultipleDoc';
import StyleDoc from '@/doc/listbox/StyleDoc';
import TemplateDoc from '@/doc/listbox/TemplateDoc';
import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc';
import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
export default {
data() {
return {
@ -70,7 +70,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/multiselect/index.vue
View File

@ -9,6 +9,7 @@ import ChipsDoc from '@/doc/multiselect/ChipsDoc';
import DisabledDoc from '@/doc/multiselect/DisabledDoc';
import FilterDoc from '@/doc/multiselect/FilterDoc';
import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc';
import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
import GroupDoc from '@/doc/multiselect/GroupDoc';
import ImportDoc from '@/doc/multiselect/ImportDoc';
import InvalidDoc from '@/doc/multiselect/InvalidDoc';
@ -16,7 +17,6 @@ import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc';
import StyleDoc from '@/doc/multiselect/StyleDoc';
import TemplateDoc from '@/doc/multiselect/TemplateDoc';
import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc';
import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
export default {
data() {
return {
@ -82,7 +82,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/password/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue';
import BasicDoc from '@/doc/password/BasicDoc.vue';
import DisabledDoc from '@/doc/password/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue';
import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/password/ImportDoc.vue';
import InvalidDoc from '@/doc/password/InvalidDoc.vue';
import LocaleDoc from '@/doc/password/LocaleDoc.vue';
@ -14,7 +15,6 @@ import MeterDoc from '@/doc/password/MeterDoc.vue';
import StyleDoc from '@/doc/password/StyleDoc.vue';
import TemplateDoc from '@/doc/password/TemplateDoc.vue';
import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
export default {
data() {
@ -71,7 +71,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/radiobutton/index.vue
View File

@ -6,11 +6,11 @@
import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
export default {
data() {
return {
@ -46,7 +46,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/selectbutton/index.vue
View File

@ -6,11 +6,11 @@
import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
import BasicDoc from '@/doc/selectbutton/BasicDoc';
import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
import ImportDoc from '@/doc/selectbutton/ImportDoc';
import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
export default {
data() {
return {
@ -51,7 +51,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/textarea/index.vue
View File

@ -8,10 +8,10 @@ import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc';
import BasicDoc from '@/doc/textarea/BasicDoc';
import DisabledDoc from '@/doc/textarea/DisabledDoc';
import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc';
import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc';
import InvalidDoc from '@/doc/textarea/InvalidDoc';
import StyleDoc from '@/doc/textarea/StyleDoc';
import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
export default {
data() {
@ -53,7 +53,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/togglebutton/index.vue
View File

@ -7,9 +7,9 @@ import AccessibilityDoc from '@/doc/togglebutton/AccessibilityDoc.vue';
import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
import StyleDoc from '@/doc/togglebutton/StyleDoc.vue';
import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
export default {
data() {
@ -41,7 +41,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/treeselect/index.vue
View File

@ -8,11 +8,11 @@ import BasicDoc from '@/doc/treeselect/BasicDoc';
import CheckboxDoc from '@/doc/treeselect/CheckboxDoc';
import DisabledDoc from '@/doc/treeselect/DisabledDoc';
import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc';
import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/treeselect/ImportDoc';
import InvalidDoc from '@/doc/treeselect/InvalidDoc';
import MultipleDoc from '@/doc/treeselect/MultipleDoc';
import StyleDoc from '@/doc/treeselect/StyleDoc';
import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
export default {
data() {
return {
@ -58,7 +58,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}

4
pages/tristatecheckbox/index.vue
View File

@ -6,10 +6,10 @@
import AccessibilityDoc from '@/doc/tristatecheckbox/AccessibilityDoc';
import BasicDoc from '@/doc/tristatecheckbox/BasicDoc';
import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc';
import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/tristatecheckbox/ImportDoc';
import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc';
import StyleDoc from '@/doc/tristatecheckbox/StyleDoc';
import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
export default {
data() {
@ -41,7 +41,7 @@ export default {
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'vee-validate',
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}