VeeValidate

VeeValidate tutorial image

Validating a login form using a custom rule

Our tutorial app will show you how to validate a login form using Vee-Validate’s rules and a custom rule of our own.

Here’s what our tutorial app looks like:

VeeValidate validate Vue.js login form using custom rule
Basic login form with name and password input fields

We validate the inputs using a number of vee-validate rules and a custom rule of our own.

If either input is invalid then the error messages are displayed when the Login button is pressed and login fails.

We can also disable the Login button if either of the inputs is invalid.

VeeValidate Vue.js login form using custom rule with errors displayed
Both inputs are invalid so the error messages are displayed

Entering valid input validates the form, removing the error messages.

VeeValidate Vue.js login form using custom rule validated
Both inputs are valid so no error messages are displayed

What is Vee-Validate?

Vee-Validate is a template based validation library for Vue.js which includes a number of standard rules. You can also easily create your own custom rules (we’ll show you how).

We won’t discuss installing the library here as it is pretty easy and adequately covered in the documentation which you can see here https://baianat.github.io/vee-validate/guide/#features

After installing Vee-Validate

Import ValidationProvider, extend and ValidationObserver:

VeeValidate import  ValidationProvider, extend and ValidationObserver
Import ValidationProvider, extend and ValidationObserver

Register the ValidationProvider and ValidationObserver components:

VeeValidate  ValidationProvider,and ValidationObserver component
Register ValidationProvider and ValidationObserver

Create your input form

We’re using Vuetify and create a Card which contains our two input fields, both vuetify text fields.

VeeValidate Vuetify name field inputA
Our name text field input
VeeValidate Vuetify password field input
Our custom password text input field

We wrap each input field in a ValidationProvider.

Validation Provider

The ValidationProvider component wraps our inputs individually and provides a validation state using scoped slots. The ValidationProvider isolates the scope for each field validation state, passing a validation context object to our template. One of the properties of interest to us in our template, an array of errors, is passed in the validation context.

This is what our provider looks like:

VeeValidate ValidationProvider
Our ValidationProvider wraps each text input field

Here we define the providers’:

  • name – the field name
  • rules – we define these rules here:
    • required – input is required
    • alpha – input must only contain alphabetic characters
    • max:20 – input cannot contain more than 20 characters
  • errors – we need access to the array of errors passed in the slot
  • bails – set to false forces all the invalid errors to display. Set to true displays the errors one-by-one
  • errors are accessed from the errors array and display as a list

ValidationObserver

Because we have more than one input field, we use a ValidationObserver to monitor all our fields. It then communicates the current validation state of our inputs as a whole.

Here’s our ValidationObserver:

VeeValidate ValidationObserver
Our ValidationObserver monitors all our input fields

The valid slot indicates the validity of all the inputs as a whole. It will be true only if all the observed inputs are valid.

You can then use the valid slot, for example to disable the button like this:

VeeValidate ValidationObserver valid slot disabled button
We can use the ValidationObserver’s valid slot to disable our button

This will disable the button until all the rules are met and the observer returns true for valid.

Validating our input

Our rules

We’re using a few standard rules that come with Vee-Validate:

  • required
  • alpha
  • max
  • min

You can see a list of Vee-Validate rules here http://vee-validate.logaretm.com/v2/guide/rules.html#after

We’re also using our own custom rule, customPassword.

Creating custom rules

There are two formats of custom rules:

The Function form

The basic form of a custom validator consists of a function that returns either a boolean or a promise. This will return a default error message stating that the field is invalid.

VeeValidate custom validator
Custom validator function

The Object form

Here the validator object can contain a custom error message.

VeeValidate custom validator error message
Custom validator error message

Our custom error message

This is our tutorials’ custom error message for our custom password rule:

VeeValidate cust password error message
Our custom password error message

We’ll use the custom error message within our custom rule. It will be displayed when the entered password fails the custom password rule.

Our custom rule

Here’s our custom password rule:

VeeValidate custom password rule
Our custom password rule

We include this custom rule in our passwords’ ValidationProvider.

  • The error message will include the password field in the message
  • We use two regular expressions to validate the input
    • notTheseChars – we don’t allow these characters
    • mustContainTheseChars – the password must contain these characters
  • an if-else statement validates the input and returns the appropriate error messages as well as the validation boolean

Validate before submitting

We use Vee-Validate’s validate() method to validate all our inputs in our signIn() method:

VeeValidate validate
We validate the input in our signIn() method
  • $refs.observer – references the observer element, the ValidationObserver. We check if its returned state is valid, i.e. all the input fields are valid
  • If invalid – we display an alert
  • If valid – we reset our input field values – naturally you would proceed to sign in first
  • reset() – this resets the validation state

Hope you found this tutorial useful.

Checkout the video on YouTube.

Download the code.