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.



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