vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Form validation example updates

Browse source
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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;