<div id="app">
  <v-form @submit="onSubmit">
    <v-field name="email" as="input" :rules="validateEmail" type="email"></v-field>

    <error-message name="email"></error-message>

    <button>Sign up</button>
span {
  display: block;
  margin: 10px 0;
const App = {
  components: {
    // Field and Form Components were renamed to avoid browser conflicts with `form` and `field` elements.
    VForm: VeeValidate.Form,
    VField: VeeValidate.Field,
    ErrorMessage: VeeValidate.ErrorMessage,
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    validateEmail(value) {
      // if the field is empty
      if (!value) {
        return 'This field is required';

      // if the field is not a valid email
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
        return 'This field must be a valid email';

      // All is good
      return true;

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@next
  2. https://unpkg.com/vee-validate@next