CODEWITHSUNDEEP
vue.jswebpackvuejs2vee-validate
Antonio Morales
Antonio Morales

Reputation: 1074

Veevalidate always return true Vuejs

I´m using webpack and instance VeeValidate using this way:

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate, {
    // This is the default
    inject: true,
    // Important to name this something other than 'fields'
    fieldsBagName: 'veeFields'
});

I have a vuejs component created for the user to subscribe to the email. The problem is that this form always gives true when I use $validator.validateAll()

Have I not understood well the functioning of Vee-validate?

This is the code of my component newsletter.vue.js

Vue.component('newsletter', {

    template :  '<div>\
    <b-form inline>\
      <b-input v-validate required  id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0"  placeholder="Deja tu email" type="email" :state="validate_input" />\
  \
      <b-button variant="primary-degree" @click="validateBeforeSubmit">Enviar</b-button>\
    </b-form>\
  </div>',

    props : ['route_post'],
        inject: ['$validator'],
    data() {
        return {
         email: '',
        }
      },
      computed: {
            validate_input: function() {
                return this.errors.has("email")
            }
      },
      methods: {
        onSubmit() {
          // Form submit logic
        },
        validateBeforeSubmit() {
            this.$validator.validateAll().then((result) => {
                console.log(result);
              if (result) {
                // eslint-disable-next-line
                alert('Form Submitted!');
                return;
              }

              alert('Correct them errors!');
            });
          }
      }




});

Upvotes: 0

Views: 686

Answers (1)

Riddhi
Riddhi

Reputation: 2244

In order to add a validation of vee-validate you need to add it as value to v-validate option and not directly within the tag.

For more info check required example on docs

Update the below line in your code.

<b-input v-validate="'required'"  id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0"  placeholder="Deja tu email" type="email" :state="validate_input" />

If you also want to display error you can add below line as =>

 <span class="error" v-if="errors.has('email')">{{ errors.first('email') }}</span>

Upvotes: 1

Related Questions