vue-form example 2

vue-form with Bootstrap styles

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<script src="https://rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<div id="app">
  <vue-form :state="formstate" @submit.prevent="onSubmit">

    <div v-if="formstate.$submittedState && formstate.$submittedState.$invalid" class="error-list">
      <field-messages tag="ul" :state="formstate.$submittedState" auto-label name="name">
        <li slot="required">
          <label>Name is a required field</label>
        </li>
      </field-messages>
      <field-messages tag="ul" :state="formstate.$submittedState" auto-label name="email">
        <li slot="required">
          <label>Email is a required field</label>
        </li>
        <li slot="email">
          <label>Email is invalid</label>
        </li>
      </field-messages>
    </div>

    <validate auto-label class="form-block">
      <label>Name *</label>
      <input v-model="model.name" name="name" required />
    </validate>

    <validate auto-label class="form-block">
      <label>Email *</label>
      <input type="email" v-model="model.email" name="email" required />
    </validate>

    <button type="submit">Submit</button>

  </vue-form>

  <pre>{{formstate}}</pre>

</div>

CSS

.form-block {
  display: block;
  margin-bottom: 1.2rem;
}

.form-block > label {
  display: block;
  margin-bottom: .2rem;
}

.vf-invalid {
  color: blue;
  border:1px red solid;
}

.error-list {
  color: red;
  margin-bottom: 1rem;
}

.error-list > ul {
  margin: 0;
}

JavaScript

Vue.use(VueForm);

new Vue({
  el: '#app',
  data: {
    formstate: {},
    model: {
      name: '',
      email: ''
    }
  },
  methods: {
    onSubmit: function() {
      console.log(this.formstate.$valid);
    }
  }
});