Vue-Validator form validation not working on JS Fiddle

Question

I want to ask a question concerning vue-validator but it is not working on JSFiddle. Can someone please help me check what the issue is so that I can go ahead and ask the main question See JSFiddle

Html:

    <div id="app">
      <validator name="instanceForm">
        <form v-on:submit.prevent="addInstance()">
          <div class="form-group">
            <input id="'instancetext" type="text" class="form-control" placeholder="Enter new Instance" v-validate:instancetext="{ required: { rule: true, message: 'What is the instance ?'}}" v-model="todo.name">
            <div class="errors" v-if="showErrors">
              <span v-if="$instanceForm.instancetext.required">{{$instanceForm.instancetext.required}}</span>

            </div>
          </div>

          <div class="form-group">
            <button class="btn btn-default"> <i class="fa fa-plus"> </i> Add
            </button>
          </div>
        </form>
      </validator>

      <div class="">
        <div v-for="todo in todoStore" class="list-group">


          <div class="list-group-item">
            <h4>
                        Main Card
                    </h4> {{todo.name}} {{todo.id}}
          </div>
          <div class="list-group-item nopadding">

            <button class="btn btn-xs btn-danger margin-10" v-on:click="todoDelete(todo)">
              <i class=" fa fa-trash"></i>
            </button>
            <form @submit="addNoteInstance">


              <div class="form-group">
                <input id="note-@{{note.id}}" type="text" class="form-control" name="note-@{{note.id}}" placeholder="Enter new Note Instance" v-model="name">

                <button type="submit"><i class="fa fa-plus"> Add Note Instance</i></button>
              </div>
            </form>
          </div>

          <div v-for="note in todoNoteStore" class="list-group nopadding nomargin">
            <div v-if="todo.id == note.id">




              <div class="list-group-item">
                <h4>
                                Note fore card {{todo.id}}
                            </h4> {{note.id}}{{note.name}}
              </div>
              <div class="list-group-item  nopadding">

                <button class="btn btn-xs btn-danger margin-10" v-on:click="removeNoteInstance(note)">
                  <i class=" fa fa-trash"></i>
                </button>

              </div>

            </div>
          </div>
        </div>
      </div>

      <pre>{{ $data | json }}</pre>
    </div>

Js:

     new Vue({
       el: '#app',
       data: function() {
         return {
           showErrors: false,
           todo: {
             id: 1,
             name: '',
             completed: false,
             check: ''
           },
           todoNote: {
             id: 1,
             name: '',
             completed: false,
             check: ''
           },

           todoStore: [


           ],

           todoNoteStore: [

           ]

         }
       },
       methods: {

         addInstance: function() {

           if (this.$instanceForm.valid) {
             this.todoStore.push(this.todo);
             this.todo = {};
             this.showErrors = false;


           } else {
             this.showErrors = true;

           }

         },

         addNoteInstance: function(e) {
           e.preventDefault();
           this.todoNoteStore.push({
             "id": 1,
             "name": this.name,
             "completed": false,
             "check": ''
           });

           this.name = '';
         },

         removeNoteInstance: function(note) {
           this.todoNoteStore.remove(note);
         }

       }
     });

css:

.nopadding {
  padding-top: 0px;
  !important;
  padding-bottom: 0px;
  !important;
}

.nomargin {
  margin: 0px;
}

Answer 1

There are two problems here.

1. The CDN you are using for Vue-Validator (v2.1.7) seems to be broken. The links for 2.1.6 and 3.0.0-alpha1 seem to be fine. (this is specifically referring to links on cdnjs)

2. Vue-Validator 2.x only works with Vue 1.x. Your CDN for Vue is pointing to Vue 2.0.3.

So, either use Vue 1.x and a a working version of Vue-Validator 2.x, or use Vue 2.x and Vue-Validator 3.x (which is currently in alpha).