new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isEmailValid() {
return '/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'.test(this.email)
},
isButtonDisabled: function() {
return !this.email || this.isEmailValid;
}
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>
<input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" />
</p>
<button :disabled='isButtonDisabled'>Send Form</button>
</div>I have implemented a functionality where the button gets disabled until the email address is validated. I have created a computed property that checks if the entered email is valid and then disables the button accordingly. However, there seems to be an issue with the validation as the button remains disabled even after entering a correct email address.
To see the implementation in action, you can check out this jsfiddle link https://jsfiddle.net/k69cr0sf/2/