How to Implement Form Validation with Vuetify in a Vue.js App

How to Implement Form Validation with Vuetify in a Vue.js App

Learn how to build a registration form and implement quality form validation using Veutify in a Vue.js app. Using Vuetify, a material design component framework for Vue.js, we can implement quality form validation.

Learn how to build a registration form and implement quality form validation using Veutify, a material design component framework.

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.

vuetify vue javascript developer programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Rolling Your Own Management Application with Vue, Vue Router, Vuetify, and node-fetch

We will work with Vue, Vue Router, Vuetify, and node-fetch to build the front end of an inventory management application. Vue is a JavaScript framework for building user interfaces on the web . Vue Router is the official router for the Vue framework. Vuetify is a Vue UI library with beautifully handcrafted Material Components. node-fetch is a module that allows you to make HTTP requests to API endpoints or any URL.

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Why Every Vue developer should Checkout Vue 3 Now - CodeSource.io

Vue 3 offers a lot of amazing new features. This article will introduce you to the new advancement in Vue 3, new features introduced to the framework, and what has changed.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.