Form validation for email not working in Vuejs

vue form validation example
vuex form validation
vuetify form validation
vue form @submit
bootstrap-vue form validation
simple-vue-validator
nuxt form validation
v-validate vuejs

When I enter the email id still notifying Email required error message. Screenshot: https://prnt.sc/pkw6ll I need when enter the email id, the error message will not show.

HTML:

<form 
    class="footer-form" 
    id="footerform-details" 
      @submit="checkForm" 
      action="#"
      method="post"
  >
    <div class="form-group" id="footerbtn-tooltip">
      <input 
        type="email" 
        class="form-control" 
        placeholder="Your Email Address"        
        v-model="email"
      >
      <button type="submit">Submit</button>
    </div>
    <p v-if="errors.length">
      <b>Please enter the following input value</b>
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>
  </form>

JavaScript:

var subscribe = new Vue({

  el: '#footerform-details',
  data: { errors: [], email: null },
  methods: {
    checkForm: function (e) {

      if (this.email) { return true; }

      this.errors = [];

      if (!this.email) {
        this.errors.push('Email required.');
      } 
      e.preventDefault();
    }
  },
})

To t the error message dynamically you need to use watchers or computed values. For this purpose, computed values is probably the better choice. Try this

<form 
    class="footer-form" 
    id="footerform-details" 
      @submit="checkForm" 
      action="#"
      method="post"
  >
    <div class="form-group" id="footerbtn-tooltip">
      <input 
        type="email" 
        class="form-control" 
        placeholder="Your Email Address"        
        v-model="email"
      >
      <button type="submit">Submit</button>
    </div>
    <p v-if="errors.length">
      <b>Please enter the following input value</b>
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>
  </form>

We leave the submit method as is. and add a computer property. This will react everytime user enters a letter.

var subscribe = new Vue({

  el: '#footerform-details',
  data: { email: null },
  methods: {
    checkForm: function (e) {
      e.preventDefault();
      if (this.email) { return true; }

      this.errors = [];

      if (!this.email) {
        this.errors.push('Email required.');
      } 
    }
  },
  computed: {
     errors: function() {
        if (!this.email) {
          return ['Email required.']; // can make it [...this.errors, 'Email required.']
        } else {
          return []
        }
     }
  },
})

let me know if this works, there are more optimizations possible. If its a subsribe email form then it will always be one input, so you could convert error to an object or just a string clearing up your htmp v-for statement as well.

Form Validation, Well, forms need validation and thankfully, HTML5 comes with many great in-built form validation capabilities for things like email, numbers, max… I will be working with Vuejs but you can always follow along even if you don't use Vue. attribute and just displays the default error message if it is not found. Form validation for email not working in Vuejs. Ask Question Thanks for the support for another way to do a simple subscribe form with validation.


I think you have to reset this.errors = []; before if(this.email) like

methods: {
    checkForm: function (e) {
        this.errors = [];
        if (this.email) {
            return true;
        }



        if (!this.email) {
            this.errors.push('Email required.');
        } 
        e.preventDefault();
    }
},

Form Validation with HTML & Vuejs, It's on our list, and we're working on it! Having a client-side validation does not remove the need of validating requests on your server—that is very The form has four inputs field for name, email, phone, and password. Once a form gets bigger, you might want split up your form into several smaller components to avoid having a mega component handling all the form validation. However, storing form data in separate components rather than in a single place makes collecting the data harder. You could loop each child component via a ref binding and get the data


Writing validation rules for input fields is not always a best practice.

I suggest to use https://www.npmjs.com/package/vee-validate package.

Import plugin in main.js Then use it as shown below.

Make sure to give name to element which you want to validate

<template>
<div>
    <input type="text" v-model='email' name="email" v-validate="'required|email'"/>
    <span v-if="errors.has('email')">{{errors.first('email')}} </span>  
    //..you don't have to create any errors array plugin will do it.
</div>
</template>
<script>
   export default{
        data(){
         email:null,
        }
   }
</script>

Now you dont have to write any validation rules yourself. v-validate will create an array of errors and show those errors if they occur.

How To Use Form Validation in Vue, Vue.js enables developers to create forms in Vue applications just as account” form that will contain fields for the user to enter their email and password. requests, JavaScript errors, performance problems, and much more. HTML Validation with Vuejs Starter. The default HTML5 validation doesn’t show all the form errors at once. The irony though is that the browser actually knows all the invalid fields once a user submits, so now all we have to do is check for them and then display however we like.


Using watchers for form input validation in Vue.js, (And yes - before someone comments, I'm aware of the issues of validating emails and even a valid email format doesn't necessarily mean it is an  Form. BootstrapVue form component and helper components that optionally support inline form styles and validation states. Pair them up with other BootstrapVue form control components for an easy customized, and responsive, layout with a consistent look and feel.


Vue Email Validator, The example is a simple registration form with pretty standard fields for first name, last name, email, password and confirm password. All fields are  Did you know that the validation errors in your Vue.js forms might not be heard by screenreader users? Learn how to create accessible validation errors with Vue.js and ARIA.


An Example of Form Validation with Vue.js, Versions vee-validate: 2.1.0-beta2 through 2.1.0-beta5 vue: 2.5.2 Describe the bug I have this code that works on email and confirmed not working #1456 <​dark-input v-model="field.value" :label="field.label" :id="field.id"  How to make a form validation using Vuelidate and Vue.js with full features such as form validate, validation group, text validation, password validation, dynamic validation, collections