How to implement form validation with Vuetify in a Vue.js app

Most websites today have signup, login, or contact forms that ask for a user’s information. Because most forms don’t provide enough feedback in times of error-handling, validating these forms helps improve users’ overall experience.

For example, when a user fills out a form that has a mistake in it, the user doesn’t know the error exists until after the form has been submitted — meaning that he or she must complete and re-submit the form again.

But, using Vuetify, a material design component framework for Vue.js, we can implement quality form validation. In this blog post, we’ll learn how to build a registration form and validate it using Veutify.

First, let start by creating a Vue.js project.

Creating a Vue.js app

We’ll use Vue CLI to create a Vue app. If you don’t have Vue CLI installed in your local system, run the npm command below to install it:

npm install -g @vue/cli

After the command has finished running, we can create a Vue.js project by running the command below.

vue create vuetify-form-validation

Afterward, we’ll be asked if we want a default preset or manual setup. In this project, we’ll use the default preset.

Let’s now add Vuetify to the project.

Adding Vuetify to the project

Vuetify provides users with everything necessary to build rich and engaging web and mobile applications.

To add Vuetify, navigate to the project folder cd vuetify-form-validation.

Then run the command below to add Vuetify:

vue add vuetify

When the Vuetify command starts running, it’ll again ask to select which preset you want. Select the default preset.

Building the registration form interface

In this article, we’ll build a registration form, which will have the following fields:

• First Name
• Last Name
• Email
• Password
• Re-type Password

We’re also going to learn how to validate each of those form fields. First, let’s design the form page. Open the component folder, delete the HelloWorld.vue file, and create RegistrationForm.vue.

We are going to use Vuetify grid components to divide our page into two columns.

Inside the RegistrationForm.vue template, write the following code:

<template>
  <v-container fluid class="fluid">
    <v-row justify="center" align="center" class="row">

      <v-col cols="6" sm="12" md="6" xs="12" class="text-center purple darken-2"
        style="height: 100vh">

        <v-row justify="center" align="center" style="height: 80vh">
          <v-col>
            <h1 class="white--text">LogRockets</h1>
          </v-col>
        </v-row>

      </v-col>

      <v-col cols="6" sm="12" md="6" xs="12" class="text-center" style="height: 100vh">
        <h1>Welcome to LogRockets</h1>
        <p>Please complete this form to create an account</p>
      </v-col>

    </v-row>
  </v-container>
</template>

Notice that we wrapped the entire section with <v-container>.

<v-container> is a Vuetify container that we can use to center or horizontally pad a website and bind a property of fluid to the <v-container> so that it can fully extend our container in any screen size that we want when building the site. It also makes it responsive.

We also used <v-row> to wrap the entire section.

<v-row> allows us to use flex properties so it can control the flow of <v-cols> the way we want it to align.

We also added <v-cols>, passed a property of cols, and gave it a value of 6 because we only want to divide the page into two columns. Note that Vuetify cols is only limited to 12 columns.
The left column has a class attribute with value purple, giving our UI purple as a background color. It has a style property with a value of height 100vh. Inside the left column, we have an <h1> tag with text inside of it.

In the right column, there’s a class property with a value of text-center and a prop of style with a value of height 100vh. Inside the right cols, we have an <h1> tag with a text and a <p> tag.

We pass a property of style with a value of height 100vh to both columns because we want our form to take up the full website page.

Building the registration form

Now, let’s build our form. Inside the right column, below the <p> tag, write the code below:

<v-form ref="form" class="mx-2" lazy-validation>
</v-form

The <v-form> is a Vuetify form component and makes it easy for us to validate form inputs.

Add form fields

Next we’ll implement form input fields. The first field is the first and last name input field. Let’s also implement its validation.

Inside the v-form, write this code:

<v-row>
  <v-col cols="6">
    <v-text-field v-model="firstname" :rules="nameRules" label="First Name">
    </v-text-field>
  </v-col>
  <v-col cols="6">
    <v-text-field v-model="lastname" :rules="nameRules" label="Last Name">
    </v-text-field>
  </v-col>
</v-row>

In the code above, we started by wrapping our <v-input> inside a row just as we did when dividing our web page into two columns. We want our form inputs to be in the second column.

The next step we took was to add the first name and last name input fields.

The <v-input> has a property of <v-model>, which is a Vue.js property that receives a value from an input. <v-input> has a property of :rules, which takes the function nameRules as its value. The nameRules function is used to set a condition that checks if the value that was passed to the input field is valid or invalid.

The <v-input> has a property of label, which by default acts like an input placeholder and label. The value is the type of input it is. Vuetify v-input by default has a type of text so you can choose to ignore it or not.

The Last Name field also has the same conditions as the First Name field, except for the label and the v-model.

Validating first name and last name fields

If we serve our app now and put the cursor on the two input fields, nothing happens. That’s because the validation function has not been assigned to the inputs.

Now, we are going to add a required validation to both inputs that says that the input cannot be empty. Next, we’ll write the validation function for the nameRules that we declared.

Go to the script tag outside the template tag and write the code below:

<v-text-field v-model="firstname" :rules="nameRules" label="First Name" required>
</v-text-field>

firstname: '',
lastname: '',
nameRules: [
  v => !!v || 'Name is required',
  v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],

In this code, we declared the firstname and lastname variables that hold the value of both name input fields as a string. After that, we declared the nameRules variable that we passed as a variable to the :rules property on the input tag.

The nameRules variable has a condition that checks if the value that was passed to the input field is a valid value. If it’s not, nameRules should always show an error.

If we run our app now and try to type inside the first and last name fields and remove the cursor, you’ll receive an error saying that a name is required.

Implementing the email field

The next field we’ll look at is the email field and its validation. Below the last name field, write the following code:

<v-row>
  <v-col cols="12">
    <v-text-field v-model="email" :rules="emailRules" label="Email" required>
    </v-text-field>
  </v-col>
</v-row>

In the email field, we pass v-model that takes the value of the email, the :rule property that holds the validation function, and the label that tells the user what kind of input it is.

Validating the email field

Write the following code to trigger the email validation:

email: '',
emailRules: [
  v => !!v || 'E-mail is required',
  v => /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'E-mail must be valid',
 ],

In it, we declared an email variable that holds both the value of the email and the emailRules variable that checks if the value input is a valid or invalid value before sending it to the server.

Another validation we have is one that checks if the input is empty and automatically prompts an error message to the user if it is.

Implementing the password and checkbox field

Lastly, let’s implement password and checkbox fields and their validations. Write the code below.

<v-row>
  <v-col cols="6">
    <v-text-field v-model="password" type="password" :rules="passwordRules"
     label="Password" required></v-text-field>
  </v-col>
</v-row>

<v-checkbox v-model="firstcheckbox" :rules="[v => !!v || 'You must agree to continue!']"
    label="I agree with Terms and Conditions" required></v-checkbox>

<v-checkbox v-model="seccheckbox" :rules="[v => !!v || 'You must agree to receive!']"
    label="I want to receive LogRocket Emails" required></v-checkbox>

Notice that the password field has a v-model property that takes the value of the input field and the :rule property that takes the validating function.

The v-checkbox also has a v-model property that takes the value of the checkbox input field. The checkbox :rule property takes the validation rule directly without passing it through any variable.

Validating password fields

Write the code below to validate the password field.

password: '',
  passwordRules: [
      v => !!v || 'Password is required',
      v => /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/.test(v) || 'Password must contain at least lowercase letter, one number, a special character and one uppercase letter',
  ],
    firstcheckbox: false,

The passwordRule variable is the same thing as the email and name rules array we’ve been declaring, but each function is given its own task to perform. The password rule checks to see if the password contains an uppercase letter, lowercase letter, special character, and a number.

Declaring button validation

Working with Veutify validation, we can still validate input fields through a button without passing the :rule prop. Here’s an example:

<v-btn class="purple darken-2 white--text mt-5"  @click="submitForm"> Register </v-btn>

methods: {
  submitForm () {
    this.$refs.form.validate();
  },
},

The code above is a Vuetify button component. The button component has a submitForm function that’s connected to a click event. Whenever the event is fired, it calls the Vuetify this.$refs.form.validate() method, which checks if the values that are passed to the input fields are valid. If the input fields are empty, it’ll prompt an error message to users.

This is another way we can validate a form using Vuetify.

Conclusion

In this blog post, we learned how to validate a form using Vuetify in a Vue app, as well as saw the two different ways we can validate a Vuetify form. If you’d like to check out the code or learn more, visit Github.