Vuejs Form validation with Yup

Form errors

Form validation is one of the most challenging task when it comes to frontend development. In vue js there are a couple of validation libraries used to validate fields in a form. Today I intend to write about validation with Yup in vuejs forms, one of the most used library when it comes to form validation with an average download rate of 1,893,937 per week from npm at the time of writing.

This article assumes that you have basic knowledge of working with vuejs, like data binding, handling local state in vue components and how to work with vue methods, it also assumes that you have a basic understanding of html and bootstrap in general. Now lets jump right in.

To follow along you need to have installed the vue cli, created a vuejs application using vue-cli and the application is up and running.

Within your src folder, open your components/ views depending on how you have structured your application or how the structure of the vue app looks at the time of reading this article. Within create a component and name it ArticleForm.vue, the name does not matter, you can literally name it whatever you want.

Now lets create a basic form in the <template></template> section with two fields, the title and description for the article.

From the code above, you could see that the inputs are bind to title and description within an article object using the v-model directive.

Article submit form

Now let’s create this article object in our script under the data section and as well create a submitData method under the methods that should be invoked whenever one clicks on the submit button in our form.

As you can notice when the submit button is clicked, the submitData is supposed to alert the data within form inputs.

Empty values submitted

Form with values submitted

From this implementation without validation, even if one submits empty field, they will be submitted and we don’t want this. So lets install yup to help in the validation process.

Install the yup package

Now let’s confirm the installed package from our package.json

Now that our yup dependency is installed, let us import/ require it in our ArticleForm.vue package and define a validation schema as well called ArticleSchema.

From the ArticleSchema, we are creating a schema to validate the title and description, and we are defining our title to conform to the respective constraints as defined in the schema likewise for the description. A simple breakdown is that the title should be a string, with a minimum number of characters not less than 10 and a maximum not greater than 100 characters and its required. Similar rules are set for the description though its should have a minimum of 50 characters and a maximum of 100 characters.

Now we need to create another object called errors, but can be any other meaningful name to define the errors we intend to capture.

errors object to handle errors

Now let us create a methods called validate to define how we will validate our inputs

From the method validate defined above, we provide a parameter called field, which will later be the specific input fields in the form, then we take the ArticleSchema and call the validateAt method provided to us by the yup package which takes in the field and the object of the form inputs to validate as arguments, this returns a promise after validate which we handle using a .then() if no error was found and .catch() to capture any error if any.

If an error if found, within the .catch() we set the key within the errors object to that error otherwise we set it to an empty string in the .then().

Then we need to modify our submitData() method to implement the validation.

In the submitData(), we leverage the validate method available to us from yup package which takes in article object and another object which sets abortEarly flag to false, this is important so as not to abort the validation prematurely if one of the fields as got any error, which would otherwise be the case if it was not set to false. This also returns a promise that we handle gracefully, where if no error is found we alert our data from the form inputs. if errors are found we set the keys in the error object to those errors in the .catch() block.

Now we need to watch for input events that will trigger validation when a user leaves an input or types anything in the form inputs.

From the code above, you can notice that blur and keypress events have been added to input fields, and if an input is blurred or a key is pressed on the input we invoke the validate method and parse in the input name as an argument, which will fulfill the field parameter to the input method in the methods.

To finalize with our validation task, lets output the errors detected during input filling to user by adding a simple paragraph tag to show the error messages from the errors object if their are any found

As you can notice, we have added the p tag at the bottom of every input, to display the error if any using a v-if directive. Now lets see how our form looks like if we submit empty fields

Form with errors

From the above images, it shows that our validation works well, though we need at least to change the color of the errors to be easily noticed by the user, within our style section, let us add some styles to do just that.

Ok. Now if you try submitting the form with empty fields, you will see the errors appear in read below the inputs and they will change during the typing as it will be validating on keypress.

Form errors when you just submit

Form errors change when typing

Form errors change when typing

Form without errors

From see we can easily see that when all rules are fulfilled, then no errors will be visible and now one can submit the data.

That is all you need to know about form validation in vue js using yup. Below is the full code for this article.

Thanks for reading and please leave a clap if this was worth your time.

References

jquense/yup

Form Validation in VueJS using Yup