Working with the error property of q-field for validation (Solved)



  • Hi there

    I would like to act on the state of the ‘error’ property of q-input like this:

        saveAccountDataButtonPressed: function () {
          // Do the saving - The validation is done on the field itself
          if (this.$refs.usernameField.error === false) {
            // this.$q.localStorage.set('username', this.username)
            console.log('No validation errors.')
          } else {
            console.log('There are validation errors.')
            console.log(this.$refs.usernameField.error)
          }
    

    and here is the q-input:

      <q-input
        ref='usernameField'
        outlined
        dense
        dark
        color="accent"
        bg-color="blue-grey-6"
        v-model="username"
        :rules="[ val => username.length >= 3 || 'Please use a minimum of 3 characters.' ]"
      />
    

    My issue now is that ‘error’ is always null instead of the expected boolean value.

    Any ideas why this is?

    Cheers,
    Michael



  • @mboeni use this.$refs.usernameField.hasError



  • @metalsadman Thanks, I wasn’t aware that there is a ‘hasError’ too.


Log in to reply