Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

dimensions

We can use the dimensions rule to validate that the selected image file has the given width and height.

For example, we can use it by writing:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" type="file" rules="dimensions:120,120" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});
export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We set the width and height by putting them after dimensions: in the rules prop.

Also, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" type="file" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});
export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { dimensions: [120, 120] },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the dimensions rule with an object.

Also, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" type="file" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});
export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { dimensions: { width: 120, height: 120 } },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to do the same thing.

email

The email rule validates that the inputted value is a valid email.

For instance, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="email" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});
export default {
  components: {
    Form,
    Field,
  },
  methods: {
    submit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We set the rules prop to 'email' to add the rule.

Also, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});
export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { email: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the email rule with an object.

Conclusion

We can use Vee-Validate 4 to validate image file dimensions and emails.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

between

The between rule lets us validate that the number entered is between a given range.

To use it, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="between:1,10" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We pass in a string into the rules prop to add the rule to the Field component.

Also, we can pass an object into the rules prop to add the rule:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { between: [1, 10] },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

The min and max numbers for the range are in the array.

Both the min and max numbers are required.

confirmed

The confirmed rule validates that the field under validation must have the same value as another field.

To use it, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="password" type="password" />

    <Field name="confirmation" type="password" rules="confirmed:@password" />
    <span>{{ errors.confirmation }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

The rules prop is set to confirmed:@password so that Vee-Validate checks that the confirmation field has the same value as the password field.

The Field components must all be inside a Form component.

digits

The digits rule checks that the inputted value must be numeric and have the specified number of digits.

For instance, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="digits:3" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We validate that the inputted value must have exactly 3 digits with the 'digits:3' string.

Also, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { digits: 3 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same rule.

Conclusion

We can add various form validation rules in our Vue 3 app with Vee-Validate 4.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

alpha_dash

The alpha_dash rule validates that an inputted value may contain alphabetic characters, numbers, dashes, or underscores.

To use it, we write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="alpha_dash" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the rule.

Also, we can add it by writing:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { alpha_dash: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

alpha_num

The alpha_num rule lets us validate that the inputted value has alphabetic characters or numbers.

For instance, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="alpha_num" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

Also, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { alpha_num: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to pass in the validation rule to the rules prop as an object.

alpha_spaces

The alpha_spaces rule validates that the inputted value has alphabetic characters or spaces.

To use it, we write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="alpha_spaces" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

Also, we can pass in an object to the rules prop to add the rule:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { alpha_spaces: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

Conclusion

We can validate alphabet inputs values easily in our Vue 3 app with Vee-Validate 4.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Use Predefined Rules

We can use predefined validation rules from the @vee-validate/rules package.

To install the package, we run:

yarn add @vee-validate/rules

or:

npm install @vee-validate/rules

Then we can add the rules from the package with the defineRule function by writing:

<template>
  <Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
    <Field name="email" as="input" />
    <span>{{ errors.email }}</span>
    <br />
    <Field name="password" as="input" type="password" />
    <span>{{ errors.password }}</span>
    <br />
    <button>Submit</button>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import { required, email, min } from "@vee-validate/rules";
defineRule("required", required);
defineRule("email", email);
defineRule("min", min);

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = {
      email: "required|email",
      password: "required|min:8",
    };
    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We import the rules from the @vee-validate/rules package and then pass them into the defineRule function to use it.

Then we can use them in the schema validation schema.

In the template, we display the error messages from the errors object.

If we enter something that’s invalid, we see a generic error message displayed.

Also, we can import all rules from the package by writing:

<template>
  <Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
    <Field name="email" as="input" />
    <span>{{ errors.email }}</span>
    <br />
    <Field name="password" as="input" type="password" />
    <span>{{ errors.password }}</span>
    <br />
    <button>Submit</button>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = {
      email: "required|email",
      password: "required|min:8",
    };
    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

Available Rules

There are many built-in validation provided by the @vee-validate/rules package.

alpha

The alpha rule validates that the inputted value only has alphabetic characters.

For instance, we can use it by writing:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="alpha" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We can also set the rules prop value in object format:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" :rules="validations" />
    <span>{{ errors.field }}</span>
  </Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";

Object.keys(rules).forEach((rule) => {
  defineRule(rule, rules[rule]);
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { alpha: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same validation rule.

Conclusion

We can add predefined validation rules into our Vue 3 app with Vee-Validate 4.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to create more complex directives.

Directive Arguments

We can get directive arguments by getting the value from the binding.arg property.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p v-absolute:[direction]="50">foo</p>
    </div> <script>
      const app = Vue.createApp({
        data() {
          return {
            direction: "right"
          };
        }
      }); 

      app.directive("absolute", {
        mounted(el, binding) {
          el.style.position = "absolute";
          const s = binding.arg || "top";
          el.style[s] = `${binding.value}px`;
        }
      }); 

      app.mount("#app");
    </script>
  </body>
</html>

We create the absolute directive which has a mounted hook.

It takes a binding parameter which has the arg property with the argument value which we passed into the square brackets of the directive.

Therefore, it’ll be the direction value.

We set the property of the style with the binding.value , which is the value we passed into the directive right of the equal sign.

Also, we can make the directive’s value by passing an expression as the value of the directive.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="range" min="0" max="100" v-model="padding" />
      <p v-absolute:[direction]="padding">foo</p>
    </div> <script>
      const app = Vue.createApp({
        data() {
          return {
            direction: "left",
            padding: 0
          };
        }
      }); 

      app.directive("absolute", {
        mounted(el, binding) {
          el.style.position = "absolute";
          const s = binding.arg || "top";
          el.style[s] = `${binding.value}px`;
        },
        updated(el, binding) {
          const s = binding.arg || "top";
          el.style[s] = `${binding.value}px`;
        }
      }); 

      app.mount("#app");
    </script>
  </body>
</html>

We have the absolute directive with the updated hook added.

The updated hook will pick up any updates of the directive’s value .

Therefore, when we move the slider, the ‘foo’ text will move along with it.

Function Shorthand

We can shorten our directive definition with the function shorthand.

If we only have the mounted and updated hooks in our directive, then we can use it.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="range" min="0" max="100" v-model="padding" />
      <p v-absolute:[direction]="padding">foo</p>
    </div> <script>
      const app = Vue.createApp({
        data() {
          return {
            direction: "left",
            padding: 0
          };
        }
      }); 

      app.directive("absolute", (el, binding) => {
        el.style.position = "absolute";
        const s = binding.arg || "top";
        el.style[s] = `${binding.value}px`;
      }); 

      app.mount("#app");
    </script>
  </body>
</html>

We shortened our absolute directive to include a callback instead of an object with the hooks.

It does the same things like the one in the previous example since we only have the mounted and update hooks in it.

This is a handy shorthand to avoid repeating code.

Object Literals

If we need multiple values in our directive, we can pass in an object literal to it.

Then binding.value has the object we pass in.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p v-custom-text="{ color: 'green', text: 'hello!' }"></p>
    </div> <script>
      const app = Vue.createApp({}); 
      app.directive("custom-text", (el, binding) => {
        const { color, text } = binding.value;
        el.style.color = color;
        el.textContent = text;
      }); 

      app.mount("#app");
    </script>
  </body>
</html>

to create a custom-text directive that takes an object.

We get the color and text properties of the object from binding.value .

Conclusion

We can create directives easier with some shorthands.

Also, directives can take arguments and values.