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

Validation examples added

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-03-16 15:57:15 +03:00
parent 23c2210493
commit a0b0c29290
20 changed files with 1717 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

32
doc/inputtext/form/VeeValidateDoc.vue
View file

@ -2,14 +2,14 @@
<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 p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<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' }" />
@ -47,28 +47,28 @@ export default {
code: {
basic: `
<template>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
@ -105,14 +105,14 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>