From 6dd01e633f21953b88c6c302767fbaa1a3918214 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Wed, 08 Jan 2025 11:19:09 +0100
Subject: [PATCH] Adding Basic Form Validation
---
11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue | 23 ++++++++++++++++++++---
1 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
index 65088e9..bcdf72a 100644
--- a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
@@ -1,8 +1,9 @@
<template>
<form @submit.prevent="submitForm">
- <div class="form-control">
+ <div class="form-control" :class="{invalid: usernameValidity === 'invalid'}">
<label for="user-name">Your Name</label>
- <input id="user-name" name="user-name" type="text" v-model="userName" />
+ <input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" />
+ <p v-if="usernameValidity === 'invalid'">please enter a valid name</p>
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
@@ -66,6 +67,7 @@
interest: [],
how: null,
confirm: false,
+ usernameValidity: 'pending',
}
},
methods: {
@@ -91,7 +93,14 @@
console.log('Confirm');
console.log(this.confirm);
this.confirm = false;
- }
+ },
+ validateInput() {
+ if (this.userName === '') {
+ this.usernameValidity = 'invalid';
+ } else {
+ this.usernameValidity = 'valid';
+ }
+ },
}
}
@@ -111,6 +120,14 @@
margin: 0.5rem 0;
}
+.form-control.invalid input{
+border-color: red;
+}
+.form-control.invalid label{
+color: red;
+}
+
+
label {
font-weight: bold;
}
--
Gitblit v1.8.0