Form validation using basic Vue is straightforward. The problem comes with the lack of different validation checks and dynamic checking. Instead of writing my form validation functions, I decided to use Vuelidate.
What is vuelidate
Vuelidate is a simple, lightweight model-based validation for Vue.js. It is model-based, decoupled from templates, and has a collection of validations. It's considered the standard validation library for Vue.js.
How do I install Vuelidate
1) Install the package via npm
2) Import the library and use as a Vue plugin.
How do I use Vuelidate
As you can see from above, we have a simple form. We use vuelidate and its libraries to require the name model.
Required means the name cannot be an empty string. We also validate the minimum length of the
name is at least 4 characters. This validation happens after the user clicks on the submit button. In the
handleSubmit method, we use
$v.$touch to check the validation of the model.
name model is not validated, then we don't move on, usually this is where we have some sort of error message.
How to use requiredIf with props
We can also create our custom validation. My goal to create a conditional validation based on its props. Vuelidate has a validator
requiredIf which can make the field optionally or conditionally required. We can combine this with the prop by passing a function to