CODEWITHSUNDEEP
javascriptvalidationvuejs2vue.js
Hendra Setiawan
Hendra Setiawan

Reputation: 23

Vee-Validate only validate one field

I am using vuejs 2 and use vee-validate 2.0.0-beta.18 for validation. But run into problem when I called this.$validator.validateAll() it only validate one field. This is the jsfiddle.

This is the html:

<body>
  <div id="app">
    <form @submit.prevent="submitForm">
      <label>Email</label>
      <input type="text" placeholder="Email" class="form-control" 
          v-model="email" name="email"
          v-validate data-vv-rules="required|email">
      <p v-if="errors.has('email')" class="text-danger">{{ errors.first('email') }}</p>

      <label>Name</label>
      <input type="text" placeholder="Name" class="form-control" 
          v-model="name" name="name"
          v-validate data-vv-rules="required">
      <p v-if="errors.has('name')" class="text-danger">{{ errors.first('name') }}</p>

      <label>City</label>
      <select class="form-control" 
          v-model="city" name="city" 
          v-validate data-vv-rules="required">
        <option value="">-- Select One --</option>
        <option value="c.id" v-for="c in cities">{{ c.name }}</option>
      </select>
      <p v-if="errors.has('city')" class="text-danger">{{ errors.first('city') }}</p>

      <button>Submit</button>
    </form>

    <pre>{{ errors }}</pre>
    <pre>{{ fields }}</pre>

  </div>
</body>

And this is the js:

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    cities: [{
      id: 1,
      name: 'Jakarta'
    }, {
      id: 2,
      name: 'Depok'
    }],
    name: '',
    city: '',
    email: ''
  },
  methods: {
    submitForm: function() {
      this.$validator.validateAll().then(function(success) {
        if (!success) return;

        alert("All good")
      })
    }
  }
})

Why only the email field being validated ?

Upvotes: 1

Views: 7006

Answers (1)

Cloud Spider
Cloud Spider

Reputation: 305

In above html code when I changed error display directives from "v-if" to "v-show" then it starts working. Here is working example in the JsFiddle.

As per VueJs Document Guide below is comparison between "v-if" vs "v-show".

v-if is lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.

In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling.

Upvotes: 2

Related Questions