clear the warnings after input changes
This commit is contained in:
parent
611e6f5c37
commit
f53d910f8e
|
@ -2,12 +2,22 @@
|
|||
<form @submit.prevent="submitForm">
|
||||
<div class="form-control" :class="{ invalid: !firstName.isValid }">
|
||||
<label for="firstname">Firstname</label>
|
||||
<input type="text" id="firstname" v-model.trim="firstName.val" />
|
||||
<input
|
||||
type="text"
|
||||
id="firstname"
|
||||
v-model.trim="firstName.val"
|
||||
@blur="clearValidity('firstName')"
|
||||
/>
|
||||
<p v-if="!firstName.isValid">Firstname must not be empty.</p>
|
||||
</div>
|
||||
<div class="form-control" :class="{ invalid: !lastName.isValid }">
|
||||
<label for="lastname">Lastname</label>
|
||||
<input type="text" id="lastname" v-model.trim="lastName.val" />
|
||||
<input
|
||||
type="text"
|
||||
id="lastname"
|
||||
v-model.trim="lastName.val"
|
||||
@blur="clearValidity('lastName')"
|
||||
/>
|
||||
<p v-if="!lastName.isValid">Lastname must not be empty.</p>
|
||||
</div>
|
||||
<div class="form-control" :class="{ invalid: !description.isValid }">
|
||||
|
@ -16,12 +26,18 @@
|
|||
id="description"
|
||||
rows="5"
|
||||
v-model.trim="description.val"
|
||||
@blur="clearValidity('description')"
|
||||
></textarea>
|
||||
<p v-if="!description.isValid">Description must not be empty.</p>
|
||||
</div>
|
||||
<div class="form-control" :class="{ invalid: !rate.isValid }">
|
||||
<label for="rate">Hourly Rate</label>
|
||||
<input type="number" id="rate" v-model.number="rate.val" />
|
||||
<input
|
||||
type="number"
|
||||
id="rate"
|
||||
v-model.number="rate.val"
|
||||
@blur="clearValidity('rate')"
|
||||
/>
|
||||
<p v-if="!description.isValid">Rate must be greater than 0.</p>
|
||||
</div>
|
||||
<div class="form-control" :class="{ invalid: !areas.isValid }">
|
||||
|
@ -32,6 +48,7 @@
|
|||
id="backend"
|
||||
value="backend"
|
||||
v-model="areas.val"
|
||||
@blur="clearValidity('areas')"
|
||||
/>
|
||||
<label for="backend">Backend Development</label>
|
||||
</div>
|
||||
|
@ -41,11 +58,18 @@
|
|||
id="frontend"
|
||||
value="frontend"
|
||||
v-model="areas.val"
|
||||
@blur="clearValidity('areas')"
|
||||
/>
|
||||
<label for="backend">Frontend Development</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="career" value="career" v-model="areas.val" />
|
||||
<input
|
||||
type="checkbox"
|
||||
id="career"
|
||||
value="career"
|
||||
v-model="areas.val"
|
||||
@blur="clearValidity('areas')"
|
||||
/>
|
||||
<label for="career">Career Advisory</label>
|
||||
</div>
|
||||
<p v-if="!areas.isValid">At least one expertise must be selected.</p>
|
||||
|
@ -88,6 +112,9 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
clearValidity(input) {
|
||||
this[input].isValid = true;
|
||||
},
|
||||
validateForm() {
|
||||
this.formIsValid = true;
|
||||
if (this.firstName.val === '') {
|
||||
|
|
Reference in New Issue