vue-form example 1

by fergal_doyle

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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <div id="app" class="container py-5">

    <p>Example showing vue-form usage with Bootstrap styles, validation messages are shown on field touched or form submission</p>

    <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">

      <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
        <label>Name</label>
        <input type="text" name="name" class="form-control" required v-model.lazy="model.name">

        <field-messages name="name" show="$touched || $submitted" class="form-control-feedback">
          <div>Success!</div>
          <div slot="required">Name is a required field</div>
        </field-messages>

      </validate>

      <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.email)">
        <label>Email</label>
        <input type="email" name="email" class="form-control" required v-model.lazy="model.email">

        <field-messages auto-label name="email" show="$touched || $submitted" class="form-control-feedback">
          <div>Success!</div>
          <div slot="required">Email is a required field</div>
          <div slot="email">Email is invalid</div>
        </field-messages>

      </validate>

      <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.phone)">
        <label>Phone number (format: xxxx-xxx-xxxx)</label>
        <input type="tel" name="phone" class="form-control" required pattern="^\d{4}-\d{3}-\d{4}$" v-model.lazy="model.phone">

        <field-messages name="phone" show="$touched || $submitted" class="form-control-feedback">
          <div>Success!</div>
          <div slot="required">Phone number is a...

CSS

.required-field > label::after {
  content: '*';
  color: red;
  margin-left: 0.25rem;
}

JavaScript

vueForm.config.classes.input.invalid = 'form-control-danger';
vueForm.config.classes.input.valid = 'form-control-success';
new Vue({
  el: '#app',
  mixins: [vueForm.mixin],
  data: {
    formstate: {},
    model: {
      name: '',
      email: '',
      phone: '',
      department: null,
      comments: '',
      notValidated: ''
    }
  },
  methods: {
    fieldClassName: function (field) {
      if(!field) {
        return '';
      }
      if((field.$touched || field.$submitted) && field.$valid) {
        return 'has-success';
      }
      if((field.$touched || field.$submitted) && field.$invalid) {
        return 'has-danger';
      }
    },
    onSubmit: function() {
      console.log(this.formstate.$valid);
    }
  }
});