How to use error-labels of q-field?



  • I have two questions regarding error-labels of q-field (in combination with q-input):

    1. When the error-label shows it moves the button below it further down. How can I solve this?
    2. When used in combination with vuelidate (as recommended for validation) I would like to show the applicable validation error(s). So instead of just showing:
      error-label="Please type a valid name" I would like to show the actual validation errors vuelidate finds, so e.g. more in line with: “Name must be longer then 4 characters and no numericals”. How would I do that using the error-label quasar provides?


    1. One way to solve this is to add a helper or character count, that way the space will be occupied already.

    2. Here’s an idea

    <q-field
      :helper="Please type your name"
      :error="$v.name.$error"
      :error-message="`Name ${errorMsg($v.name)}`"
      @blur="$v.name.touch()"
    >
      <q-input v-model="name" />
    </q-field>
    
    export default {
      data () {
        return {
          name: '' 
        }
      },
      validations: {
        name: {
          required,
          minLength: minLength(4),
          maxLength: maxLength(24)
        }
      },
      methods: {
        errorMsg (item) {
          if (!item.$error) return ''
          if (!item.required) return 'is required'
          if (!item.minLength) return `must be at least ${item.$params.minLength.min} characters long`
          if (!item.maxLength) return `must not be more than ${item.$params.maxLength.max} characters long`
        }
      }
    }
    


  • @benoitranque Yeah, I noticed that the helper does ‘solve’ my first issue. I would prefer not to have a helper/ counter though. Your suggestion to my second issue is very helpful. Thanks a lot!



  • Have you tried adding a [space] character as a helper? Should take up space (pun intended) while remaining invisible.



  • Yeah, tried. Does not work.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.