How to get standard error text when using q-input with Vuelidate?

[paul]

I have following q-input:
<q-input v-model=“form.amount” type=“number” stack-label=“Amount” @blur="$v.form.amount.$touch" :error="$v.form.amount.$error" />

which has following vuelidate standard validation rules attached:
validations: {
form: {
amount: { required, between: between(1, 999) },
}

The inputbox nicely colors red when the validation fails, but I can’t get the standard error text which I presume vuelidate generates like “the field amount is required”, "the value of amount must be between 1 and 999).

Any idea.
Warm regards
paul.

[rstoenescu]

Wrap with a QField. Look for examples in the docs.

[a47ae]

http://beta.quasar-framework.org/components/field.html#Validations-with-Vuelidate

This snippet should fit your input:

<q-field
  :error="$v.form.amount.$error" 
  error-label="The amount is required and must be between 1 and 999"
>
  <q-input v-model=“form.amount” type=“number” stack-label=“Amount” @blur="$v.form.amount.$touch" :error="$v.form.amount.$error" />
</q-field>

[paul]

@a47ae Thanks for the reply. Basically, a field can have multiple validators attached to it. So, I’m searching for a way to show the standard error message which goes directly with these standard validators and show them or show the first one that fails.
So, in your example the error msg will always be “The amount is required and mustbe between 1 and 999” while the error could be related to another validator failing.

[a47ae]

I am not using Vuelidate, but another validator library (http://vee-validate.logaretm.com/) which generates these error messages for me.
But from quickly scanning the docs Vuelidate does not do this.

Instead, you could use computed properties to generate the message and bind this to error-label

<template>
  <q-field
  :error="$v.form.amount.$error" 
  :error-label="amountError"
>
  <q-input v-model=“form.amount” type=“number” stack-label=“Amount” @blur="$v.form.amount.$touch" :error="$v.form.amount.$error" />
</q-field>
</template>

<script>
  export default {
    computed: {
      amountError () {
        if (this.$v.form.amount.required) {
          return 'The Amount field is required' 
        } else if (this.$v.form.amount.between) {
          return 'The Amount must be between 1 and 999'
        } else {
         return null
        }
      }
    }
  }
</script>

This is a quick and dirty version, but you should be able to start from here.

[paul]

@a47ae Cool. That’s very useful info. Thanks you very much.