Vuetify form validation, validation Error message not getting displayed

Question

Using Vuetify form validation, validation error message not getting displayed.

I am using Vue.js, Vuetify and TypeScript. I was trying to validate a form but my validation messages are not getting displayed. Though the field is turning to red. I can also see the error func getting called

<template>
  <v-layout row justify-center>
    <v-dialog v-model="show" persistent max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">Testing validations</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="form.valid" ref="form">
              <v-layout wrap>
                <v-flex xs12>
                  <v-text-field
                    label="Checklist Name"
                    v-model="list.name"
                    :rules="[errorFunc]"
                    name="checklist"
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-form>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="add">Save</v-btn>
          <v-btn color="blue darken-1" flat @click="show = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from "vue-property-decorator";

  @Component({
    components: {}
  })
  export default class listForm extends Vue {
    @Prop() visible!: boolean;

    form = {
      valid: false
    };

    list = {
      name: ""
    };

    errorFunc() {
      let val: any;
      if (this.list.name.length >= 3) {
        val = true;
      } else {
        val = "Errorrrr";
      }
      console.log(val);
      return val;
    }

    get show() {
      return this.visible;
    }
    set show(value) {
      if (!value) {
        this.$emit("close");
      }
    }
    add() {
      if (this.$refs.form.validate()) {
        this.$emit("save", this.list);
      }
    }
  }
</script>

I am not sure why I am not able to see the validation error message.

Solution 1

Assuming your rules logs the right error message in the console I can't see anything wrong with your code, but here is a working example from the project I'm working on right now.

  <v-text-field 
    v-model="data.editedItem.email" 
    label="Email" 
    :rules="[data.rules.required, data.rules.email]" 
  </v-text-field>

and the rules are here

  data: {
    rules: {
      required: value => !!value || "Required.",
      email: value => {
        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return pattern.test(value) || "Must be a valid e-mail.";
      }
    }
  }

Solution 2

I know that in your v-text-field there is no a hide-details prop, but in my case this prop was blocking the message.

Comments

[Fakeer]

I can also see the <VMessages> tag with the validation error in it. Just can not see it on UI

[max]

@user1739163 - I added a screenshot of my DOM to the post. Check if it's the nodes are there, but are not visible.

[Fakeer]

yup i can see the nodes as well . When i remove display:none from the below css it works .v-text-field__details { display: none; } . How can i fix it?

[max]

@user1739163 - I cannot replicate that. v-text-field__details is always { display: flex; } for me. I do not have display:none anywhere in the hierarchy. Try adding values to error-messages, messages and hint attributes. Try adding persistent-hint attribute. More on them here: vuetifyjs.com/en/components/text-fields#api