Extending Vuetify Form Field Validation

Let’s explore how to extend Vuetify’s input field validation to replace empty fields with default values.

Say we have a form with some fetched values, for example, a user profile form. The user wants to edit his data and then removes his login and moves to another field instead of actually creating a new login. The login field
is empty now. Things look fine with the default Vuetify validation for empty fields:

Vue’s two-way binding is syncing our data with the input and we now have a blank login field and we don’t want that behavior here. Instead we want to fill them with the initial values we fetched.

Getting Started

Let’s add a simple function to solve our problem. In real projects you’ll probably make use of a store, but here I’ll use a simple data object to save the values.

We can take an example from the Vuetify website and add the user object:

<v-form>
  <v-text-field
    v-model='gator.login'
    label='Login'
    :rules='loginRules'
    required
  ></v-text-field>
  <v-text-field
    v-model='gator.email'
    :rules='emailRules'
    label='E-mail'
    required
  ></v-text-field>
</v-form> 

export default {
  data() {
    return {
      loginRules: [v => !!v || "The input is required"],
      emailRules: [
        v => !!v || "E-mail is required",
        v => /.+@.+/.test(v) || "E-mail must be valid"
      ],
      gator: {
        login: "",
        email: ""
      }
    };
  },
  mounted() {
    this.gator.login = "crocodilian";
    this.gator.email = "crocodilian@alligator.io";
  }
};

At first, create an object to save the fetched data and fill it:

export default {
  data() {
    return {
      currentGator: {
        login: null,
        email: null
      }
    };
  },
  mounted() {
    this.currentGator.login = this.gator.login;
    this.currentGator.email = this.gator.email;
  }
};

Let’s listen to the change event and check if some of the values are empty. As we have two fields, pass-in the field name as the second argument:

<v-text-field
  v-model='gator.login'
  label='Login'
  :rules='loginRules'
  @change='checkEmpty($event, "login")'
  required
></v-text-field>
<v-text-field
  v-model='gator.email'
  :rules='emailRules'
  @change='checkEmpty($event, "email")'
  label='E-mail'
  required
 ></v-text-field>

And write the simple checkEmpty method:

methods:{
  checkEmpty(value, field){
    if(!value.trim()){
      this.gator[field] = this.currentGator[field];
    }
  }
}

That’s it! Now important fields are never empty. And if you need to add one more field just call the method with the change event and pass-in the field name.

Adding a New Input

For example, this is how you could add a name to the gator and the currentGator objects:

<v-text-field
  v-model='gator.name'
  label='Name'
  :rules='loginRules'
  @change='checkEmpty($event, "name")'
  required
></v-text-field>

export default {
  data() {
    return {
      gator: {
        login: "",
        email: "",
        name: ""
      },
      currentGator: {
        login: null,
        name: null,
        email: null
      }
    };
  },
  mounted() {
    this.gator.name = "Cayman";
    this.currentGator.name = this.gator.name;
  }
};