Form validation example updates

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

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;