VueJS Vee-Validate Validation Not Happening On Input

Question

I have a very basic VueJS form, wherein I am validating the input.

The form validation happens on initial call to the validate form method, and the appropriate validation messages are displayed on each input.

What I am puzzled about is that on the vee-validate example for the forms, clicking on the submit button invokes the validation, and then displays the error message for each form input. Once you enter a value on the input (say on the name field), you can clearly see that the validation error and message for that field is removed.

I am providing a sample JSBin illustrating the issue I am having.

On the output panel, click on the Validate Form button, and you can see that the validation is working. But once you enter some text on the input field (i.e. First Name), the validation does not work anymore, unless you explicitly click again on the Validate Form button. This does not seem to be the same behavior on the Vee-Validate form.

Am I overlooking or missing something? Appreciate any input on what may be causing the issue as I am quite new with VueJS.

Thanks.

Codes as from JSBin:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <title>JS Bin</title>
</head>
<body>
  <div id="app" class="container">
    <form class="form-horizontal" @submit.prevent="validateBeforeSubmit">
      <div class="form-group">
        <label class="control-label col-md-2 col-sm-4" for="firstName">First Name:</label>
        <div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('FirstName') }">
          <input name="FirstName" v-model="firstName" v-validate:firstName.initial="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
          <span v-show="errors.has('FirstName')" class="help-block error text-danger">{{ errors.first('FirstName') }}</span>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-md-2 col-sm-4" for="lastName">Last Name:</label>
        <div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('LastName') }">
          <input name="LastName" v-model="lastName" v-validate:lastName.initial="'required|alpha|min:3'" class="form-control" type="text" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('lastName') }" >
          <span v-show="errors.has('LastName')" class="help-block error text-danger">{{ errors.first('LastName') }}</span>
        </div>
      </div>
    </form>

    <a class="btn btn-success btn-md " v-on:click="validateBeforeSubmit">Validate Form</a>
    <hr />
    <pre>{{ errors }}</pre>
    <pre>{{ fields }}</pre>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.21/vee-validate.min.js"></script>  
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

JS

Vue.use(VeeValidate);

var app = new Vue({
  el: '#app',

  data: {
    firstName: null,
    lastName: null
  },

  methods:{
    validateBeforeSubmit: function(){
      function onOk(){
        alert('Form is OK');
      }

      function notOk(){
        alert('Form Not OK');
      }

      this.$validator.validateAll().then(onOk, notOk);
    }
  }
});

Saurabh Saurabh · Accepted Answer · 2017-01-31T14:54:26

As it is in the documentation, you have to make following changes:

Only put v-validate="'required|alpha|min:3'"
You can add data-vv-delay="100" to get errors after 100ms or whatever time you deem fine.

see HTML below :

<input name="FirstName" v-model="firstName"  data-vv-delay="100" v-validate="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >

See working bin.

VueJS Vee-Validate Validation Not Happening On Input

1 Answers