Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form fields custom validation message

See original GitHub issue

Hi, how can I use Laravel for validation?

<template>
    <div>
        <form>
            <v-card>
                <v-card-text>
                    <v-row>
                        <v-text-field
                                label="Nome"
                                v-model="data.name"
                                name="name"
                                id="name"
                                :rules="rules.name"
                        ></v-text-field>
                    </v-row>
                    <v-row>
                        <v-text-field
                                label="Descrizione"
                                v-model="data.description"
                                name="description"
                                id="description"
                                multi-line
                        ></v-text-field>
                    </v-row>
                    <v-row>
                        <v-checkbox
                                label="Attivo"
                                name="status"
                                id="status"
                                v-model="data.status"
                                input-value="1"
                                success
                        ></v-checkbox>
                    </v-row>
                </v-card-text>
                <v-card-row actions>
                    <v-btn flat @click.native="submit" :loading="loading" type="submit">Salva</v-btn>
                </v-card-row>
            </v-card>
        </form>
    </div>
</template>

<script>

    import swal from 'sweetalert'

    export default {
        data() {
            return {
                data: {
                    name: null,
                    description: null,
                    status: null
                },
                rules: {
                    name: []
                },
                loading: false
            }
        },

        methods: {
            submit() {
                this.loading = true;
                this.$http.post('api/categories')
                    .then(response => {
                        this.loading = false;
                        swal('', response.data.message, response.data.status);
                    }, error => {
                        this.loading = false;
                        let errorType = error.response.status;
                        if (errorType == 422) {
                            let self = this;
                            _.forEach(error.response.data, (v, i) => {
                                 self.rules[i] = [() => v[0]]
                            });
                        } else {
                            swal(errorType.toString(), response.data.message, response.data.status);
                        }
                    })
            }
        }
    }

</script>

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:8 (1 by maintainers)

Top GitHub Comments

3reactions

Qanahcommented, Feb 20, 2018

@beggiatom try this way, but i have some issues on the reset the error-messages after start typing again

<template>
  <v-form v-model="valid" ref="form" lazy-validation>
    <v-card>
      <v-card-title class="headline">Login</v-card-title>
      <v-card-text>
        <v-text-field
          label="E-Mail or Mobile number"
          v-model="email"
          :rules="emailRules"
          :error-messages="messages.email"
          required
        ></v-text-field>
        <v-text-field
          label="Password"
          v-model="password"
          :rules="passwordRules"
          :error-messages="messages.password"
          required
        ></v-text-field>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="submit" color="primary" :loading="loading" :disabled="loading" >
          Log in
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-form>
</template>

<script>
  export default {
    name: "login",
    data: () => ({
      valid: false,
      loading: false,
      password: '',
      email: '',
      messages: {
        email: [],
        password: [],
      }
    }),
    computed: {

      emailRules() {
        return [
          v => !!v || 'E-mail is required',
          v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
        ]
      },

      passwordRules() {
        return [
          v => !!v || 'Password is required',
          v => v.length > 6 || 'Password must be grater than 6 characters'
        ]
      },

    },
    methods: {
      submit() {

        if (this.valid && this.$refs.form.validate()) {

          this.loading = true;

          let data = {
            email: this.email,
            password: this.password
          };

          this.$axios.post('api/login', data).then((res) => {
            this.loading = false;
            console.log(res)
          }).catch((err) => {
            this.valid = false;
            this.loading = false;

            let errors = err.response.data.errors;

            if (errors) {
              for (let field in errors) {
                this.messages[field] = errors[field]
              }
            }

          })

        }

      }
    }
  }
</script>

<style scoped>

</style>

0reactions

zorar4ikcommented, Jun 27, 2018

@beggiatom thank you for sharing!