How to use error-labels of q-field?

[MusicForMellons]

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?

[benoitranque]

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`
    }
  }
}

[MusicForMellons]

@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!

[benoitranque]

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

[MusicForMellons]

Yeah, tried. Does not work.

[theara]

I use Vee Validate, it work fine

    <q-field
      :error="errors.has('name')"
      :error-label="errors.first('name')"
    >
      <q-input
        v-validate="rules.name"
        v-model="form.name"
        name="name"
        float-label="Name"
      />
    </q-field>
--------
// Data
      form: {
        name: '',
      },
      rules: {
        name: {
          required: true,
        },
// Methods
    submitForm() {
      this.$validator.validate().then(result => {
        if (result) {
          // success        
        }else{
          // error
        }