I am working on creating a vue.js based form validation system that validates input on-the-fly without the need for page refresh.
Currently, I have implemented the following code for email field validation:
<div class="container" id="forms" >
<label for="inputEmail" class="sr-only"></label>
<input type="email" id="inputEmail" class="form-control" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddb8a5bcb0adb1b89db9b2b0b8b3f3beb2b0">[email protected]</a>" required v-model='email'>
<div class="error" v-show="email && !isEmailValid"><span style="color:red;">Input Correct e-mail </span></div></div>
new Vue({
el: '#forms',
data: { email: ''},
computed: {isEmailValid: function 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)
); } } });
However, when I try to apply similar validation patterns to other form inputs, it seems to break. It either displays error messages from the beginning or doesn't show any errors regardless of the input provided.
You can access the fiddle with this link.
I suspect there might be a mistake in the script section where I am trying to make everything work. There could be an issue with declaration or syntax that I am struggling to pinpoint. I've tried various solutions, but nothing seems to fix the problem. Can anyone please assist me?