Server side form validation with vue.js and vuetify

Question

I'm seeing lots of documentation for client-side validation with Vuetify, but finding it very difficult to find docs for server side validation messages for vuetify and vue.

PROBLEM

I have this component:

<template>
  <v-container>
    <v-layout row>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-card-text>
            <v-container>
              <h3>Register Now</h3>
              <form v-on:submit.prevent="onSubmit">
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      name="email"
                      label="Email"
                      type="email"
                      ref="user_email"
                      id="email">
                    </v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      name="password"
                      label="Password"
                      type="password"
                      ref="user_password"
                      id="password">
                    </v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-btn type="submit">Sign Up</v-btn>
                  </v-flex>
                </v-layout>
              </form>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  import axios from 'axios'
  import router from 'vue-router'

  export default {
    data() {
      return {
        errors: [],
      }
    },
    methods: {
      onSubmit: function () {
        axios.post('/users', {
          user: {
            email: this.$refs.user_email.value,
            password: this.$refs.user_password.value
          }
        })
        .then(response => {
        })
        .catch(error => {
          this.errors.push(error.response.data.errors);
        })
      }
    }
  }
</script>

It basically collects errors that come back from the server. Those are the error messages I want to show if something goes wrong.

EXAMPLE:

If the email is blank, this will capture the "email_is_blank" message with the errors array. But how can I take that message and display it in the form using Vue.js and Vuetify?

Consider applying a class (e.g. invalid-input) to each failed input according to the errors received, and include CSS for that class that helps indicate that the input is invalid (e.g. a red border). You could also look into forcing the inputs themselves into an invalid state programmatically, but I seem to recall this being hacky and potentially unreliable. The class + CSS option is the most certain solution. — B. Fleming

Traxo Traxo · Accepted Answer · 2019-04-25T07:27:26

Codepen example

One of the ways would be to create object with value and error string:

data: () => ({
  email: {
    value: '',
    error: ''
  }
})

Then bind your model to object value, and error-messages prop to object error:

<v-text-field
  v-model="email.value"
  label="email"
  :error-messages="email.error"
></v-text-field>

In your response just change the value of error:

...
.then(response => {
  this.email.error = response.errors.email // or whatever the path is to the relevant error message from the server
})

Server side form validation with vue.js and vuetify

PROBLEM

EXAMPLE:

1 Answers