Vuelidate — Custom Validators

Vue.js doesn’t come with any form validation capabilities by default.

Therefore, we need to add our own form validation library or with our own code.

In this article, we’ll look at how to create custom validators with Vuelidate.

Custom Validators

We can create our own custom validators with Vuelidate.

For instance, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.required">name is required.</div>
      <div v-if="!$v.name.mustBeCool">name is invalid.</div>
    </div>
  </div>
</template>
<script>
import { required } from "vuelidate/lib/validators";
const mustBeCool = value => value.includes("cool");

export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  validations: {
    name: {
      required,
      mustBeCool
    }
  }
};
</script>

We created the mustBeCool function to validate the name field with it.

value has the inputted value.

We just return what we expect to be valid in the function.

Optional Validator

We can also validate optional fields with our custom validator.

To do this, we use a helper function from Vuelidate.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.mustBeCool">name is invalid.</div>
    </div>
  </div>
</template>
<script>
import { helpers } from "vuelidate/lib/validators";
const mustBeCool = value => !helpers.req(value) || value.includes("cool");

export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  validations: {
    name: {
      mustBeCool
    }
  }
};
</script>

to make name an optional field.

We only validate if the value is a non-empty string.

The helpers.req(value) to check if the value is required or not.

Negating that means we make the field optional.

Extra Parameters

We can add extra parameters to the field.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.mustBeCool">name is invalid.</div>
    </div>
  </div>
</template>
<script>
import { helpers } from "vuelidate/lib/validators";
const contains = param => value => !helpers.req(value) || value.includes(param);
export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  validations: {
    name: {
      mustBeCool: contains("cool")
    }
  }
};
</script>

to add a parameter to our code for validation.

We created the contains function which takes a param parameter.

Then we can check for param with the includes method to see if what we entered is included.

value has the inputted value.

$props Support

Also, we can use the withParams method to create our validator with parameters.

If we use withParams , we get the information about the validation rule with the $params property.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.mustBeCool">name is invalid.</div>
    </div>
  </div>
</template>
<script>
import { helpers } from "vuelidate/lib/validators";
const contains = param =>
  helpers.withParams(
    { type: "contains", value: param },
    value => !helpers.req(value) || value.includes(param)
  );

export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  validations: {
    name: {
      mustBeCool: contains("cool")
    }
  }
};
</script>

We called the helpers.withParams method to get our parameter for our contains function.

The type property lets us set the type of property that we’re accepting.

Conclusion

We can create custom validators with Vuelidate.