Vuetify validate textfield on input-CodePudding

<v-text-field v-model='postal_code' 
  validate-on-blur
  name="postal_code"
  :maxlength="postalCodeLength(postal_code)"
  ref="postalCode"
  @input="handle(postal_code, 'postalCode')"
  :rules="postalCodeRules"
  required
  :disabled="disabledPostalCode">
</v-text-field>

I want the validation message to appear as soon as the user starts typing on the text field. But the validation message appears when the user leaves the textfield and starts entering data on another textfield. I think this is because of validate-on-blur but if remove validate-on-blur then the validation message appears all the time even if the user is not entering data on this field. Help me resolve this issue.

CodePudding user response：

Take a look at following snippet (you can make condition, in your rule, that postal_code is not empty, and remove validate-on-blur)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      postal_code: '',
      postalCodeRules: [
      value => {
        const patern = /^[A-z]\d[A-z] \d[A-z]\d$|^\d\d\d\d\d$/
        if(this.postal_code) return patern.test(value) || 'Please use the format A0A 0A0 or 12345'
        else return true
      }],
      disabledPostalCode: false
    }
  },
  methods: {
    handle() {},
    postalCodeLength() {}
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field v-model='postal_code' 
          name="postal_code"
          :maxlength="postalCodeLength(postal_code)"
          ref="postalCode"
          @input="handle(postal_code, 'postalCode')"
          :rules="postalCodeRules"
          required
          :disabled="disabledPostalCode">
        </v-text-field>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

CodePudding user response：

Instead of adding multiple attributes for a validation (maxlength, required, etc..), You can simply add these validations in your :rules object, Rest will take care by the Vuetify and Vue.

If you want to handle any logics on input change, Then you can achieve that by using @input event and based on the validation rule passed, You can put that logic accordingly.

Here is the live demo (Just for a demo purpose I added only required field validation) :

new Vue({
  vuetify: new Vuetify(),
  data: {
    name: ''
  },
  methods: {
    validateField() {
      this.$nextTick(() => {
        if (this.$refs.nameInput.validate()) {
          console.log('name field validation passed')
        } else {
          console.log('name field validation failed')
        }
      })
    }
  }
}).$mount('#app');

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>

<div id="app">
  <v-text-field
    outline
    v-model="name"
    label="Enter Your Name"
    :rules="[(v) => !!v || 'Name is required']"
    @input="validateField"
    ref="nameInput"
  />
</div>