In my form, I have an input field that is validated to check if it is empty or not. If the input field is empty, a red border is applied using class binding.
However, when the user focuses on the input field after receiving the error, the error message should disappear. Unfortunately, this functionality is not working as expected. The error message does not go away upon focus.
new Vue ({
el: '#app',
data: {
register: {
firstName: '',
},
errors: {
firstName: '',
},
},
methods: {
validateLoginForm() {
const regsrt = this.register;
this.errors = {};
if(!regsrt.firstName) {
this.errors.firstName = 'First Name is required';
} else {
this.errors.firstName = '';
}
},
deleteErrors(errorName) {
this.errors[errorName] = '';
}
}
});
<div id="app">
<form action="" method="POST" accept-charset="UTF-8" @submit.prevent="validateLoginForm()">
<label for="firstName">First Name</label>
<input
:class="{'red-border': errors.firstName}"
type="text"
@focus="deleteErrors('firstName')"
v-model="register.firstName">
<input type="submit" value="Register">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>JSFiddle: http://jsfiddle.net/6L3shqdk/14/
The desired behavior is that upon focusing on the input field, the error message for the first name should be removed and the red border should disappear due to class binding being set to false. However, this is currently not functioning as intended. Assistance would be appreciated!