CODEWITHSUNDEEP
vue.jsvuetify.js
Qiuzman
Qiuzman

Reputation: 1739

Using Vuetify validation text area for manual validation

I have a search box for a Vuetify web application and when the user hits the search icon the form field does the typical validation rules and applies the message if it does not meet those regex specs.

I use the validated input to do a post request and see if any results return from our database. If the results do return I go to the next page, if the results fail I want to use the validation field area to say ID does not exist.

Is this possible? Does vuetify offer a way to use display a custom message in this validation area through a prop of some sort? I have not been able to find one.

Upvotes: 0

Views: 1725

Answers (1)

muka.gergely
muka.gergely

Reputation: 8329

Yes, you can do it; the Vuetify docs have a section on input field error state: #error. I put together a snippet to demonstrate the control of the error state:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      validationProp: true,
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-text-field outlined v-bind="{
                error: !validationProp,
                ...(!validationProp && { 'error-messages': ['Fatal error'] })
              }" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-btn @click="validationProp = !validationProp">
              TOGGLE ERROR STATE
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

The only catch was that if I just added the error attribute the control worked, but there was no message; if I also added the error-messages, then the control stopped working - it was stuck in a perpetual error state. Thus, I decided to add the error-messages conditionally:

...(!validationProp && { 'error-messages': ['Fatal error'] })

EDIT

If you want to "target the error-message", then you just have to bind a variable to it instead of a simple string.

Based on the comment below, the snippet is edited:

const DEFAULT_ERROR_MESSAGE = 'Default error message'

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      validationProp: true,
      errorMessage: DEFAULT_ERROR_MESSAGE,
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-text-field outlined label="Type here the error message you want" v-model="errorMessage" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-text-field outlined v-bind="{
                error: !validationProp,
                ...(!validationProp && { 'error-messages': [errorMessage] })
              }" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-btn @click="validationProp = !validationProp">
              TOGGLE ERROR STATE
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

Upvotes: 1

Related Questions