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.

  • I use Vee Validate, it work fine

    // Data
          form: {
            name: '',
          rules: {
            name: {
              required: true,
    // Methods
        submitForm() {
          this.$validator.validate().then(result => {
            if (result) {
              // success        
              // error

Log in to reply