When we added Vuelidate to our project through Vue.use, the library added a new reserved property that we can use on our components: validations.

This property is added onto the configuration object for the component, alongside data(), computed, and so on. It will also be an object that holds a property of its own for each input that we want to validate.

Let's create this property and set up a new input, without a custom component wrapper to test. Once we understand the basics, we can work on translating all of this into our BaseInput and BaseSelect components.

Follow these steps in order to create validation rules:

1. Create a new <input> form below the telephone object of BaseInput in App.vue:

<input type="text" v-model="form.website" />

2. Remember to add this new property, website, to the form object of data():

form: {
  firstName: '',
  lastName: '',
  email: '',
  love: 'fun',
  telephone: '',
  website: ''
},

Now, let's go and actually create a validations property; for now, we will only add the form.website validations.

3. Place it on the top level of the component object, at the same level as your data() and computed properties:

validations: {
  form: {
    website: {
      // our validations will go here
    }
  }
}

For this particular field, we want to make sure that we validate that the input that the user provides, is a valid URL. In Vuelidate, we have several different built-in validators that we can use out of the box. A complete list can be found at https://vuelidate.netlify.com/#sub-builtin-validators.

In order to validate that the input is a valid URL, we have the URL validator. But, in order for us to add it to our website's validators object, we have to import it first. Vuelidate allows us to import only the validators that we are actually going to be using; that way, we can ensure that our deployed code stays smaller.

4. Add the following import statement to App.vue, near the other imports:

import { url } from 'vuelidate/lib/validators';

5. Now that we have imported the statement, we can finally add it to the validations.website object:

validations: {
  form: {
    website: {
      url // Validate that the "website" input is a valid URL
    }
   }
 },

That's enough of setting up our rules. Remember the new <input> form that we created earlier to hold v-model="form.website"? We're going to need to make some adjustments to the way that v-model is set up, in order for Vuelidate to take charge of the validation.

Apart from the validations property that we used earlier to set up our rules, Vuelidate gives us access to a new property inside the component instance: $v.

$v is a special object that holds a copy of our validation structure. Among other things, a notable trait is that it has a $model property for each one of the elements that we added to validations. Vuelidate will become an intermediary model for us, and in turn, it will take care of actually binding to our form.website property within data(), automatically.

Let's look at this in practice:

6. Update the <input> website element to use the new v-model format that Vuelidate expects. Also, we are going to interpolate the $v object below it, so that you can see more clearly what's happening behind the scenes, as follows:

<input type="text" v-model="$v.form.website.$model" />
<pre>{{ $v }}</pre>

7. Go back to your browser and take a look at the structure of the $v object, before you type anything in your new form field. 

The first thing to pay special attention to is the form.website object. Inside this object, Vuelidate will keep the validation state of this input. The $model property will hold the user's input, just as we told v-model to do. The $error property is the one that will actually toggle a Boolean value, and will let us know if there was an error in the input.

Try typing some random gibberish in the field and observe the properties that get updated. The $error property will update to true, to indicate that there is an error. The url property, which is directly tied to the URL rule, will switch to false, to indicate that the URL validation condition is not being met.

8. Let's add some CSS binding onto <input>, in order to visually display that something is not passing validation on our input:

<input 
  type="text"
  v-model="$v.form.website.$model" 
  class="form-control"
  :class="{ 
    'is-valid': !$v.form.website.$error && $v.form.website.$dirty,
    'is-invalid': $v.form.website.$error
  }"
/>

Try this in your browser before we go into a further explanation. Try typing a valid URL, such as http://google.com, and notice how the input changes to reflect your changes. 

The :class binding is a way to add classes conditionally to any HTML element in Vue. In the type of syntax that we are using here, an object, it allows us to set up a key-value pair, in which the key defines the class that we want to be toggled, for example, is-valid. 

The value is a JavaScript condition that will be evaluated, in order to determine whether or not the class should be applied. These conditions are reactive, and will be re-executed every time the dependencies of the condition change.

In our example, is-valid will be toggled on, whenever there is no $error and the input is $dirty. If you're wondering why we have to check against $dirty as well, try removing that part of the condition and then reload your browser. You'll notice right away that the green border and checkmark are present on the input, even if the element doesn't have any value in it. The way we determine whether <input> has been modified by the user at any point is through the $dirty property; in this case, it makes sense from a UX perspective to not show the valid visual queues until there's actually some input there.

In the case of is-invalid, we are checking to see if there are any $errors present in the field, and setting the field up with a nice red border and an x icon.

Now that we have some basic rules in place, let's move on to the next section, where we will learn how to incorporate all of this into our custom components.