Vue.js input validation w VeeValidate - How to avoid onInput action while invalid

Question

I am validating a input field ( required , min length 3 ) with VeeValidate plugin.. it's working fine but how I can avoid the onInput action to be called ( to avoid commit in store when the input becomes invalid ( as soon as input aria-invalid switch to false )

shortly said : Is there anyway to switch calling/not Calling onInput: 'changeTitle' when the input field aria-invalid is false/true ?

thanks for feedback

ChangeTitleComponent.vue

    <template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input name="title" data-vv-delay="1000" v-validate="'required|min:3'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="onInput({ title: $event.target.value, id: id })"/>
        <p v-show="errors.has('title')">{{ errors.first('title') }}</p>
      </div>
    </template>

    <style scoped>
    </style>

    <script>
      import { mapActions } from 'vuex'
      import Vue from 'vue'

      import VeeValidate from 'vee-validate'
      Vue.use(VeeValidate)

      export default {
        props: ['title', 'id'],
        methods: mapActions({  // dispatching actions in components
          onInput: 'changeTitle'
        })
      }
    </script>

vuex/actions.js

    import * as types from './mutation_types'
    import api from '../api'
    import getters from './getters'

    export default {
      ...
      changeTitle: (store, data) => {
        store.commit(types.CHANGE_TITLE, data)
        store.dispatch('updateList', data.id)
      },

      updateList: (store, id) => {
        let shoppingList = getters.getListById(store.state, id)
        return api.updateShoppingList(shoppingList)
        .then(response => {
          return response
        })
        .catch(error => {
          throw error
        })
      },
      ...
    }

UPDATE

I tried to capture the input value with @input="testValidation) and check for a valid input value (required) if valid ( aria-invalid: false) then I emit the input value, but the props are not updated in the parent component and the vuex action 'changeTitle' is not triggered

    <template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input name="title" ref="inputTitle" data-vv-delay="1000" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="testValidation({ title: $event.target.value, id: id })"/>
        <p v-show="errors.has('title')">{{ errors.first('title') }}</p>
      </div>
    </template>

    <script>
      import { mapActions } from 'vuex'
      import Vue from 'vue'

      import VeeValidate from 'vee-validate'
      Vue.use(VeeValidate)

      export default {
        props: ['title', 'id'],
        methods: {
          testValidation: function (value) {
            const ariaInvalid = this.$refs.inputTitle.getAttribute('aria-invalid')
            if (ariaInvalid === 'false') {
              this.$nextTick(() => {
                this.$emit('input', value) // should change props in parent components
              })
            } else {
              console.log('INVALID !') // do not change props
            }
          },
          ...mapActions({
            onInput: 'changeTitle' // update store
          })
        }
      }
    </script>

I'll give a try... don't understand why the onInput is not executed when the emit(input) is triggered... — , Sep 21 '17 at 08:04

score 0 · Accepted Answer · answered Apr 09 '18 at 09:10

like you access the errors collection in the VUE template, you can also access the same errors collection in your testValidation method

so replace

const ariaInvalid = this.$refs.inputTitle.getAttribute('aria-invalid')

with

 const ariaInvalid = this.$validator.errors.has('title')

grtz

Vue.js input validation w VeeValidate - How to avoid onInput action while invalid

1 Answers1