Category: Vue

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.

required

The required rule lets us validate that a value is entered into the input.

For example, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="required" />
    <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="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: { required: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the rule with an object.

size

The size rule lets us validate the file doesn’t exceed the given size in kilobytes.

For example, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" type="file" rules="size:100" />
    <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 validate that the selected file is less than 100 kilobytes.

Also, we can write:

<template>
  <Form @submit="onSubmit" 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: { size: 100 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same rule.

Global Message Generator

We can change how the validation messages are generated.

To do this, we write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="email" rules="required|email" />
    <span>{{ errors.email }}</span>
  </Form>
</template>

<script>
import { Form, Field, defineRule, configure } from "vee-validate";
import * as rules from "@vee-validate/rules";

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

configure({
  generateMessage: (context) => {
    return `The field ${context.field} is invalid`;
  },
});

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

We call the configure method with the generateMessage method to return the validation error message.

context has the field data. context.field has the field name.

So when we type in something other than an email address, we get The field email is invalid displayed.

We can set the label prop to set the value of context.field to the value of the label prop:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="email" label="Email" rules="required|email" />
    <span>{{ errors.email }}</span>
  </Form>
</template>

<script>
import { Form, Field, defineRule, configure } from "vee-validate";
import * as rules from "@vee-validate/rules";

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

configure({
  generateMessage: (context) => {
    return `The field ${context.field} is invalid`;
  },
});

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

Now we see The field Email is invalid when we type in something other than an email address.

Conclusion

We can validate required fields and selected file sizes with Vee-Validate 4 in our Vue 3 app.

Also, we configure Vee-Validate 4 to show the validation messages we want.

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.

min

The min rule specifies that the length of the inputted value shouldn’t be less than the specified length.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="min: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 set the min value to 3 to set the minimum length that we allow for the inputted value.

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: { min: 3 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same rule.

min_value

The min_value rule lets specify the min value that we allow as the inputted value.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="min_value:5" />
    <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>

If we enter a number less than 5, we’ll see an error.

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: { min_value: 5 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same rule.

numeric

The numeric rule lets us validate that the inputted value is a number.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="numeric" />
    <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 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: { numeric: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same rule.

Conclusion

We can validate numeric inputs 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.

max

We can use the max rule to make sure the entered value doesn’t exceed the specified length.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="max: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 add the max length after the colon.

So if we entered something that’s more than 10 characters long, an error will be displayed.

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

<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](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fvee "Twitter profile for @vee")-validate/rules";

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

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

max_value

The max_value prop lets us make sure that the inputted value doesn’t exceed the given number.

For example, we can use it by writing:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="max_value: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 add the max number to check for after the colon.

If we enter a number bigger than 10, we’ll see an error displayed.

Also, we can use an object to add the rule:

<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: { max_value: 10 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

mimes

We can use the mimes rule to check that the selected file has the given MIME type.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" type="file" rules="mimes:image/jpeg" />
    <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 to a file input.

We can also add the rule with an object:

<template>
  <Form @submit="onSubmit" 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: { mimes: ["image/jpeg"] },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We put the MIME type we allow in the mimes array property.

Conclusion

We can validate MIME types of files, max length of input, and max value of an input within 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.

is

The is rule lets us validate that the entered value must match the given value.

The match is determined by strict equality.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="is:hello" />
    <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 add the rule by setting the text we want to check for after the colon.

So the field is valid when we type in 'hello' .

Otherwise, we see an error message displayed.

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: { is: "hello" },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the rule with an object.

is_not

The is_not rule lets us check that the entered value mustn’t match the given text.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="is_not:hello" />
    <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.

If we type in hello , then we get an error.

Otherwise, the field is valid.

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: { is_not: "hello" },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to do the same thing.

length

We can use the length rule to validate that an iterable that is entered as the value has the given length.

Iterables include strings, arrays, or anything that can be converted to an array with Array.from .

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="length:5" />
    <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 validation.

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: { length: 5 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to do the same thing.

Conclusion

We can validate various kinds of input values 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.

ext

The ext validation rule checks that the file selected has one of the extensions listed.

For example, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" type="file" rules="ext:jpg,png" />
    <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>

Then the selected file must either have the jpg or png extensions.

We can add any number of extensions to the list.

Also, we can write:

<template>
  <Form @submit="onSubmit" 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: { ext: ["jpg", "png"] },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We have the extensions in an array.

image

The image rule lets validate that the selected file has a MIME-type that starts with image/ .

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" type="file" rules="image" />
    <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 rules prop to 'image' to restrict the selected file to be an image.

Also, we can write:

<template>
  <Form @submit="onSubmit" 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: { image: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to do the same thing.

integer

The integer rule lets us validate that the inputted value must be an integer.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="field" rules="integer" />
    <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 integer rule to the rules prop.

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: { integer: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to do the same thing.

Conclusion

We can validate that the selected file has the given extension or that it’s an image with Vee-Validate 4 in our Vue 3 app.

Also, we can validate that what the user entered is an integer.