There are a couple more things that we need to do before we can close off this chapter. First of all, let's take care of BaseSelect; it still needs a validator property and some :class bindings.

Follow these steps to find out how we can do this:

1. First, add the validator prop in BaseSelect.vue:

validator: {
type: Object,
 required: false,
  validator($v) {
   return $v.hasOwnProperty('$model');
  }
}

Now, let's add the :class binding; except here, we're not going to check against $dirty, because we don't have an initial empty value.

2. Add the following code to the <select> element:

:class="{
  'is-valid': validator && !validator.$error,
  'is-invalid': validator && validator.$error
}"

3. Now that the component is ready, go back to App.vue and update our BaseSelect element with its own :validator attribute:

<BaseSelect 
  label="What do you love most about Vue?" 
  :options="loveOptions"
  v-model="$v.form.love.$model"
  :validator="$v.form.love"
/>

4. Go back to your browser and verify that the element is behaving as expected.

Another thing that we shouldn't forget to change is our onSubmit method on App.vue. Right now, we are using a computed property that is doing a very poor job of checking the validity of our form. Let's fix this by leveraging some more of Vuelidate's power to check whether our form is ready to submit. To do this, let's delete our formIsValid computed property first. 

Vuelidate has an $invalid property on the root of the $v object, which we can check to see whether the form is ready for submission. We are going to use this in a minute for our onSubmit method.

5. Delete the formIsValid computed property completely:

computed: {}

By default, all forms start out as having an $invalid state, because Vuelidate triggers its validations when the user $touches and modifies the input fields. We need to make some slight adjustments in order to accommodate this behavior with our Submit button.

6. Change the button's :disabled attribute first, in order to check against $error, instead of our old computed property:

<button 
 :disabled="$v.$error" 
  @click.prevent="onSubmit" 
  type="submit" 
  class="btn btn-primary"
>Submit</button>

7. Next, let's modify the onSubmit method to both force the $touch method of all the inputs (and to trigger the validations on all of them), and to check afterward whether the form is actually valid and ready for submitting:

onSubmit() {
  this.$v.$touch();
  if (!this.$v.$invalid) return;   
  axios.post('http://localhost:3000/dolphins', { params:        
  this.form }).then(response => {
  console.log('Form has been posted', response);
  }).catch(err => {
  console.log('An error occurred', err);
  });
}

Go back to your browser and reload the window to clear the inputs. Without typing anything, click on the Submit button. You will see that the $v.$touch() method will trigger and the invalid inputs (such as those that are required, for example) will turn to red to indicate that there is a problem.

In the following screenshot, you can see how validator is working, and how it is visually confirming to the user, what is happening:

That's it! Vuelidate is a fantastic tool when it comes to form validation—it is super flexible, and allows for hooking into external data sources such as Vuex, which we will see in the next chapter.