Add Form Validation to a Vue 3 App with Vuelidate 2 — Models and Dirty

Vuelidate 2 is a popular form validation library made for the Vue 3 apps.

In this article, we’ll look at how to add form validation to our Vue 3 app with Vuelidate 2.

$model

We can bind our form fields to the $model property.

This way, we can show errors only when the field is dirty.

For instance, we can write:

<template>
  <div>
    <input v-model="v$.name.$model" />
    <template v-if="v$.name.$dirty">
      <div v-for="error of v$.name.$silentErrors" :key="error.$message">
        <div>{{ error.$message }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";

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

We have the v$ reactive property that’s used to do all the form validation checks.

Once v$.name.$model has been manipulated, $dirty will become true .

And we show the error messages by rendering the entries in v$.name.$silentErrors .

Also, we can set the $autoDirty property to true to make a field that’s been manipulated have the $dirty property automatically set to true .

To do this, we write:

<template>
  <div>
    <input v-model="v$.name.$model" />
    <template v-if="v$.name.$dirty">
      <div v-for="error of v$.name.$silentErrors" :key="error.$message">
        <div>{{ error.$message }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";

export default {
  name: "App",
  setup() {
    return { v$: useVuelidate() };
  },
  data() {
    return {
      name: "",
    };
  },
  validations() {
    return {
      name: { required, $autoDirty: true },
    };
  },
};
</script>

Lazy Validations

We can also set the $lazy property to true to make Vuelidate validate fields only when the field has been manipulated.

For instance, we can write:

<template>
  <div>
    <input v-model="v$.name.$model" />
    <template v-if="v$.name.$dirty">
      <div v-for="error of v$.name.$silentErrors" :key="error.$message">
        <div>{{ error.$message }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";

export default {
  name: "App",
  setup() {
    return { v$: useVuelidate() };
  },
  data() {
    return {
      name: "",
    };
  },
  validations() {
    return {
      name: { required, $lazy: true },
    };
  },
};
</script>

to set the property in the validations method.

Display More Error Information

To display more error information, we can write:

<template>
  <div>
    <input v-model="v$.name.$model" />
    <template v-if="v$.name.$dirty">
      <div v-for="error of v$.name.$silentErrors" :key="error.$message">
        <strong>{{ error.$validator }}</strong>
        <span> on property</span>
        <strong>{{ error.$property }}</strong>
        <span> says:</span>
        <strong>{{ error.$message }}</strong>
      </div>
    </template>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";

export default {
  name: "App",
  setup() {
    return { v$: useVuelidate() };
  },
  data() {
    return {
      name: "",
    };
  },
  validations() {
    return {
      name: { required, $lazy: true },
    };
  },
};
</script>

error.$validation has the name of the validation rule as a string.

error.$property has the name of the field as a string.

error.$message has the form validation error message.

Conclusion

We can set how form validation is triggered with Vuelidate 2 in our Vue 3 app.

Also, we can display more error information than the message.