VeeValidate

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:

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.

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

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:

Register the ValidationProvider and ValidationObserver components:

Create your input form

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

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:

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:

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:

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.

The Object form

Here the validator object can contain a custom error message.

Our custom error message

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

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:

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:

• $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.