[Vuejs]-Make Vuetify v-text-field component required by default

by

5👍

✅

You could do the following:

Create a v-form and place your textfields inside the form. Don’t forget to give your v-form a v-model and a ref too.
On mounted you can access the v-form via this.$refs and call .validate() just as Jesper described in his answer. In the codesandbox below you can see that the textfields immediately go red and display the “Required.” text.

<v-form v-model="formValid" ref="myForm">
    <v-text-field label="Field 1" :rules="rules.required"></v-text-field>
    <v-text-field label="Field 2" :rules="rules.required"></v-text-field>
</v-form>


<script>
export default {
  data() {
    return {
      formValid: false,
      rules: {
       required: [value => !!value || "Required."]
      }
    };
  },
  mounted() {
   this.$refs.myForm.validate();
 }
};
</script>

Example:

👤discolor

0👍

You should change your validation a little bit to achieve this.

<ValidationProvider rules="required" v-slot="{ errors }" ref="title">
    <v-text-field
      v-model="title"
      label="Title"
    ></v-text-field>
</ValidationProvider>

And then you should call this.$refs.title.validate()

If you trigger this when mounted() is called, it should validate all the fields right away, as you’re requesting.

👤Jesper

Leave a comment