[Vuejs]-How to access custom error messages we pass in rules in v-form using this.$refs.formName vuetify

by

0👍

Your Validate method on the this.$refs.toolForm is evaluating all the fields of the defined form, hence showing all errors.Consider using a conditional statements or class directives to show errors as per individual field

0👍

to check single field you can use
validate
it is not documented but can be used
same as in library in a line 209
https://github.com/vuetifyjs/vuetify/blob/8bb752b210d25fbebcea12cd073d2ce4986f5e12/packages/vuetify/src/components/VForm/__tests__/VForm.spec.ts

 new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        valid: true,
        name: '',
        nameRules: [
          v => !!v || 'Name is required',
          v => (v && v.length <= 10) || 'Name must be less than 10 characters',
        ] 
      }),

      methods: {
        validate () {
          this.$refs.form.validate()
        },
        validateName () {
          this.$refs.name.validate(true)
        },
        reset () {
          this.$refs.form.reset()
        },
        resetValidation () {
          this.$refs.form.resetValidation()
        },
      },
    })
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.0/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
    <div id="app">
      <v-app id="inspire">
        <v-form
          ref="form"
          v-model="valid"
          lazy-validation
        >
          <v-text-field
            v-model="name"
            ref="name"
            :counter="10"
            :rules="nameRules"
            label="Name"
            required
          ></v-text-field>
          <v-btn
            :disabled="!valid"
            color="success"
            class="mr-4"
            @click="validate"
          >
            Validate
          </v-btn>
      
          <v-btn
            :disabled="!valid"
            color="success"
            class="mr-4"
            @click="validateName"
          >
            Validate Name
          </v-btn>
          
          <v-btn
            color="error"
            class="mr-4"
            @click="reset"
          >
            Reset Form
          </v-btn>
      
          <v-btn
            color="warning"
            @click="resetValidation"
          >
            Reset Validation
          </v-btn>
        </v-form>
      </v-app>
    </div>

Leave a comment