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

      :helper="Please type your name"
      :error-message="`Name ${errorMsg($}`"
      <q-input v-model="name" />
    export default {
      data () {
        return {
          name: '' 
      validations: {
        name: {
          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.