[Vuejs]-Vuetify validate textfield on input

by

0👍

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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

0👍

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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

Leave a comment