Why Vuetify’s native form validation sucks

Introduction

Form validation with Vuetify

If we look at the docs about form validation we’ll see three options. Two of the options tell us to use vee-validate and vuelidate libraries and the first one shows us how we can use rules prop to validate the form.

Let’s say I do not want to use third party library to keep my app’s bundle size small or for some other reason. For that, I should add rules prop to the form element which is just an array of functions that return either true or some string value (error message). Here is how it looks like:

example of vuetift’s native form validation

To trigger the validation and check if the form is valid, we need to use methods that v-form has. According to the docs, validate method validates all registered inputs and returns true if validation was successful and false otherwise. Following the docs, the handleSubmit method would look like this:

handleSubmit method with Vuetify’s native form validation

Now, this process is quite straightforward, we can look at what the problem is.

The problem

async validation with rules prop

The only way to validate form element with an API is to use error , error-messages and error-count props. These props just set the validation state of the form element:

manual validation with error props

To test this, lets’s add the second input with error-messages into the form:

invalid text-field with error and error-messages

Now what happens if we hit submit button? Go to the sandbox I have created, click the submit button and look at the console. Although we have marked the second input as invalid, this.$refs.form.validate() will return true. This is not an expected behavior in both from developer perspective and from user perspective. In this case, the API request will still be made even though the surname input is invalid (a.k.a has error-messages). So what is the cause of this problem?

The cause

validate method from Vuetify’s source code

Validate method takes all the inputs the form has, calls validate method on them and filters them to find if there is an invalid input or not. If you look at the VTextField component, you will see that there isn’t any method named validate . This is because all form elements implement validatable mixin which has all the properties and methods that a validatable form element has. Let’s look inside of validatable mixin and see what validate method does:

inside the validate method

As you see, it calls all the functions that the rules prop has, pushes the error messages (if there are any) into the variable called errorBucket and finally checks if error bucket is empty or not. If empty then this input element is valid. The error-messages prop that we passed to our second element is accepted as a prop and is not being checked inside validate method. So the error-messages prop is for visual purpose only.

The solution

I have opened an issue on this one and it was closed saying that this is not a feature they want to implement for now 🐵.

Conclusion

Thanks for reading and do not hesitate to reach me out or comment below, if you think I am missing something or you have an alternative approach to solve this issue.

Front-End Engineer / JavaScript Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store