computed: {
isDisabled: function(){
return
!(this.errmsg.email < this.email.minemail)
}
watch: {
email(value){
// binding this to the data value in the email input
this.email = value;
// eslint-disable-next-line
console.log("email",this.email);
this.validateEmail(value);
}
},
methods: {
validateEmail(value) {
// eslint-disable-next-line
console.log("email",this.email,value);
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(value))
{
this.errmsg['email'] = '';
} else{
this.errmsg['email'] = 'Invalid Email Address';
}
},
}<input type="text" v-validate="'required'" name="email" placeholder="Enter your company email ID" :maxlength="maxemail" id='email' v-model='email' />
<div v-if="errmsg.email" class="invalid-feedback-register">
{{errmsg.email}}
</div>
<button type="submit" :class="(isDisabled) ? '' : 'selected'"
:disabled='isDisabled' v-on:click=" isFirstScreen" @click="persist" >PROCEED</button>Using watch to handle email input field for validation and it is working fine, But the issue is when trying to disable button based on {{errmsg.email}} its not working.
If email is valid, enable button , otherwise disabled untill user enters correct email id in the field.
Answer
In your code there are some mistakes, why are you checking this.errmsg.email < this.email.minemail, I didn’t get why less than < sign is there.
Also, why you need to watch every email id change, just use "input" event and it will do the same job on email change.
I modified the code below, as per what I understand from seeing the variables that you provided above.
<template>
<div>
<input type="text" v-validate="'required'" name="email" placeholder="Enter your company email ID" @input="validateEmail" :maxlength="maxemail" id='email' v-model="email" />
<div v-if="errmsg.email" class="invalid-feedback-register">
{{errmsg.email}}
</div>
<button type="submit" :class="(isDisabled) ? '' : 'selected'"
:disabled="isDisabled" @click="persist">PROCEED</button>
</div>
</template>
<script>
export default {
data() {
return {
email: null,
errmsg: { email: '' },
maxemail: 60
}
},
computed: {
isDisabled () {
return (!this.email || this.errmsg.email !== '')
}
},
methods: {
validateEmail() {
// eslint-disable-next-line
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(this.email)) {
this.errmsg.email = ''
} else this.errmsg['email'] = 'Invalid Email Address';
},
persist () {
}
}
}