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