CODEWITHSUNDEEP
vue.jsvuetify.js
Bjorn Ruiz
Bjorn Ruiz

Reputation: 546

How to show an error message after an input/field

I'm trying to do a check without vuevalidate. I just need to show this message below the input/field when I get an error or false.

I tried using :error-messages. But it returns me an error

Error: check failed for prop "errorMessages". Expected String, Array, got Function

Code

<v-text-field
   class="ma-0 pa-0"
   v-model="timeStart"
   :counter="5"
   :rules="rules_time"
   label="Hora de início"
   @blur="verificarHora"
   :error-messages="messageErrors"
></v-text-field>

...
methos: {
...
verificarHora(element){
      if(!element.target.value.match(/^[0-9]+$/)){
        this.messageErrors()
      }
},
messageErrors(){
      return 'erro';
},
...
}

Upvotes: 1

Views: 1353

Answers (1)

dopenguin
dopenguin

Reputation: 81

I usually accomplish this behaviour in Vuetify by adding the rules parameter (see more here).

So, as an example, if your input value is not allowed to exceed 20 characters and only letters are allowed, you could write the following code:

<template>
  <v-text-field
    counter="20"
    :rules="myRules"
  />
</template>

<script>
export default {
  ...
  data: () => ({
    myRules: [
      input => input.length <= 20 || "Input exceeds 20 characters.",
      input => /^[A-Za-zäÄöÖüÜß]*$/.test(input) || "Only letters are allowed."
    ]
  })
  ...
}
</script>

Upvotes: 1

Related Questions