Refactoring Forms

Extracting Input Fields

You've only used ValidationProvider and ValidationObserver to build forms so far, but building forms like that can get tedious and time consuming especially for very large forms.

For example you might have a form that looks like this:

<template>
  <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(onSubmit)">
      <ValidationProvider tag="div" rules="required" name="First Name" v-slot="{ errors }">
        <input v-model="fname" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider tag="div" rules="required" name="Last Name" v-slot="{ errors }">
        <input v-model="lname" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider tag="div" rules="required|email" name="E-mail" v-slot="{ errors }">
        <input v-model="email" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider tag="div" rules="required|min:6|confirmed:confirmation" name="password" v-slot="{ errors }">
        <input v-model="password" type="password">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider tag="div" vid="confirmation" rules="required" name="Confirmation" v-slot="{ errors }">
        <input v-model="passwordConfirmation" type="password">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider tag="div" name="Country" rules="required" v-slot="{ errors }">
        <input v-model="country" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <button>Submit</button>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  data: () => ({
    fname: '',
    lname: '',
    email: '',
    password: '',
    passwordConfirmation: '',
    country: ''
  }),
  methods: {
    onSubmit () {
      alert('Form submitted!');
    }
  }
}
</script>

Refactoring vee-validate is no different than refactoring regular Vue.js components, by inspecting the template of the last example you should notice that all the inputs look exactly the same, they are all wrapped by ValidationProvider and all of them have an element to display the error.

<ValidationProvider rules="required" name="Last Name" v-slot="{ errors }">
  <input v-model="lname" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

The only dynamic parts are the rules, name and the type of the input.

You can refactor the last sample to build your own TextInput component, this is a basic implementation of such a component:

<template>
  <ValidationProvider tag="div" :rules="rules" :name="name" :vid="vid" v-slot="{ errors }">
    <input :type="type" v-model="currentValue">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from 'vee-validate';

export default {
  name: 'TextInput',
  components: {
    ValidationProvider
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    rules: {
      type: [String, Object],
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    vid: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data: () => ({
    currentValue: ''
  }),
  watch: {
    currentValue (val) {
      // allows us to use v-model on our input.
      this.$emit('input', val);
    }
  }
};
</script>

Such a component would be used to handle all the text-based inputs in your app in. For other types of inputs, it might be worth it to implement custom wrappers around them just like this one.

Check out the large form from earlier but when the fields are swapped by the TextInput component you've implemented just now:

<template>
  <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(onSubmit)">
      <TextInput v-model="fname" name="First Name" rules="required" />

      <TextInput v-model="lname" name="Last Name" rules="required" />

      <TextInput v-model="email" name="E-mail" rules="required|email" />

      <TextInput v-model="password" type="password" name="Password" rules="required|min:6|confirmed:confirmation" />

      <TextInput v-model="passwordConfirmation" type="password" name="Confirmation" vid="confirmation" rules="required" />

      <TextInput v-model="country" name="Country" rules="required" />

      <button>Submit</button>
    </form>
  </ValidationObserver>
</template>

<script>
import TextInput from './text-input';

export default {
  components: {
    TextInput
  },
  data: () => ({
    fname: '',
    lname: '',
    email: '',
    password: '',
    passwordConfirmation: '',
    country: ''
  }),
  methods: {
    onSubmit () {
      alert('Form submitted!');
    }
  }
}
</script>

Not only it looks much cleaner, but also due to the nature of template-based validation, It is declarative and it is clear what each field requirements are without having to skim through the JavaScript.

Advanced Input Fields

You've only touched the surface of refactoring the ValidationProvider, if you want, you could use the rich state provided by the ValidationProvider to build stylish, accessible and functional inputs for your users.

This is an example that utilizes the following:

• Uses required flag to display * next to field labels to indicate that they are required.
• Uses errors to display error UI state.
• Uses ariaMsg and ariaInput bindings to improve accessibility.