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

VeeValidate added to form components

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2023-03-17 16:05:14 +03:00
parent 048b8d267a
commit 24cba65dcc
20 changed files with 1676 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

136
doc/knob/form/VeeValidateDoc.vue Normal file
View file

@ -0,0 +1,136 @@
<template>
<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 flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column 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" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column 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" />
</form>
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column 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" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Knob id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>