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.
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.
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.
In this article, we’ll build a registration form, which will have the following fields:
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
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> 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
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.
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
<v-form> is a Vuetify form component and makes it easy for us to validate form inputs.
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.
<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.
<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.
Last Name field also has the same conditions as the
First Name field, except for the
label and the
Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.
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.
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.