hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Add Signup validation and feedback

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-12 15:03:52 +02:00
parent 719a3a9f4f
commit c1abc028e1
1 changed files with 76 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
web/src/components/SignupForm.vue
View File

@ -1,50 +1,65 @@
<template>
<div>
<b-form @submit.prevent="handleSubmit">
<b-form-group
id="email-group"
label="Email address:"
label-for="email"
description="We'll never share your email with anyone else."
>
<b-form-input
id="email"
v-model="form.email"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-card class="mt-3" header="Signup">
<b-form @submit.prevent="handleSubmit">
<b-form-group
id="email-group"
label="Email address:"
label-for="email"
description="We'll never share your email with anyone else."
>
<b-form-input
id="email"
v-model="form.email"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group id="username-group" label="Username:" label-for="username">
<b-form-input
id="username"
v-model="form.username"
required
placeholder="Enter a username"
></b-form-input>
</b-form-group>
<b-form-group id="username-group" label="Username:" label-for="username">
<b-form-input
id="username"
v-model="form.username"
required
placeholder="Enter a username"
:state="validUsername"
></b-form-input>
<b-form-invalid-feedback :state="validUsername">
Your username must be at least 5 characters long.
</b-form-invalid-feedback>
</b-form-group>
<b-form-group id="password-group" label="Password:" label-for="password">
<b-form-input
id="password"
v-model="form.password"
required
placeholder="Enter a password"
></b-form-input>
</b-form-group>
<b-form-group id="password-group" label="Password:" label-for="password">
<b-form-input
id="password"
v-model="form.password"
required
placeholder="Enter a password"
:state="validPassword"
></b-form-input>
<b-form-invalid-feedback :state="validPassword">
Your password must be at least 6 characters long.
</b-form-invalid-feedback>
</b-form-group>
<b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
<b-form-input
id="password-confirm"
v-model="form.passwordConfirm"
required
placeholder="Confirm your password"
></b-form-input>
</b-form-group>
<b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
<b-form-input
id="password-confirm"
v-model="form.passwordConfirm"
required
placeholder="Confirm your password"
:state="passwordEquals"
></b-form-input>
<b-form-invalid-feedback :state="passwordEquals">
Your password must be at least 6 characters long.
</b-form-invalid-feedback>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</b-card>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
<b-card class="mt-3" header="Form Data Result">
<pre class="m-0">{{ form }}</pre>
</b-card>
@ -61,12 +76,29 @@
email: '',
password: '',
passwordConfirm: ''
}
},
}
},
computed: {
passwordEquals: function () {
return this.form.password === this.form.passwordConfirm
},
validUsername: function () {
return this.form.username.length >= 5
},
validPassword: function () {
return this.form.password.length >= 6
},
validInput() {
return this.validUsername && this.passwordEquals && this.validPassword;
}
},
methods: {
handleSubmit(){
handleSubmit() {
console.log("submitted")
if (this.validInput) {
console.log("Valid")
}
}
}
}