Spread the love

Form validation is a common requirement of in most web apps. This is no different with Vue apps.

Vue doesn’t provide a solution for form validation out of the box. Therefore, we have to find our own solution for form validation.

In this article, we’ll look at how to do basic Vue form validation with VeeValidate.

Getting Started

We can get started by including the VeeValidate library by writing:

<script src="https://unpkg.com/vee-validate@latest"></script>

in our HTML file.

Then we can write:

Vue.component("validation-provider", VeeValidate.ValidationProvider);

to include the validation-provider component in our app. We need to wrap this around our form fields to let VeeValidate do validation on it.

Then we need to define some form validation rules to actually do the form validation.

To do this, we use the VeeValidate.extend function, which takes the rule name string as the first argument, and the callback function that returns the condition for a validate input as the second argument.

For instance, we can use Veelidate.extend as follows to create a rule for for validating that the inputted value is an odd number:

VeeValidate.extend("odd", value => {
  return value % 2 !== 0;
});

In the code above, we check if value % 2 returns 0 or not. If it doesn’t then it’s an odd number.

Likewise, we can do something similar to check if an inputted value is a positive number as follows:

VeeValidate.extend("positive", value => {
  return value >= 0;
});

We can use the rules as follows in a small app with a form field that we can enter something into:

index.js:

Vue.component("validation-provider", VeeValidate.ValidationProvider);

VeeValidate.extend("odd", value => {
  return value % 2 !== 0;
});

VeeValidate.extend("positive", value => {
  return value >= 0;
});
new Vue({
  el: "#app",
  data: {
    value: ""
  }
});

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vee-validate@latest"></script>
  </head>
  <body>
    <div id="app">
      <validation-provider rules="positive|odd" v-slot="{ errors }">
        <input v-model="value" type="text" name="value" />
        <span>{{ errors[0] }}</span>
      </validation-provider>
    </div>
    <script src="index.js"></script>
  </body>
</html>

In the template above, we have a slot that gets the errors object from the validation-provider component which contains the form validation errors messages.

We display the first one by accessing the string on the 0 index of errors.

The rules prop has the rules separated by the | symbol. We applied the positive and odd rules that we defined earlier in index.js

Note that the validation-provider is wrapped around our input. This is required to validate the input. We wrap one validation-provider per input.

Then when type in something that’s not a positive, odd number, we’ll see ‘value is not valid’ displayed.

value is from the value of the name attribute of the input.

Rule Arguments

We can pass in arguments to rule callbacks so that we can do more complex validations. For instance, we can write the following rule to validate that the inputted value is a number bigger than or equal to a certain number:

VeeValidate.extend("min", {
  validate(value, args) {
    return value >= args.num;
  },
  params: ["num"]
});

Then we can apply it as follows:

index.js:

Vue.component("validation-provider", VeeValidate.ValidationProvider);

VeeValidate.extend("min", {
  validate(value, args) {
    return value >= args.num;
  },
  params: ["num"]
});

new Vue({
  el: "#app",
  data: {
    value: ""
  }
});

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vee-validate@latest"></script>
  </head>
  <body>
    <div id="app">
      <validation-provider rules="min:5" v-slot="{ errors }">
        <input v-model="value" type="text" name="value" />
        <span>{{ errors[0] }}</span>
      </validation-provider>
    </div>
    <script src="index.js"></script>
  </body>
</html>

In the code above, we have min:5 to indicate that we want to make sure that our inputted value is 5 or greater.

Conclusion

Validation of Vue forms with VeeValidate is simple. We can do a lot with a few lines of code.

Validation rules are defined with extend. And we use the validation-provider component to validate inputs by wrapping it around the input element.

Also, we can pass in arguments to validation rules to make them more flexible.

Getting Started

Rule Arguments

Conclusion

Related Posts

By John Au-Yeung

Leave a Reply Cancel reply