handling form validation error in laravel 5.4 + vueJS

Question

I have form create.vue like this:

    <template>
    <div>
        <div v-if="message" class="alert alert-success">
            {{ message }}
        </div>

        <form @submit.prevent="store" action="/user" method="post">
            <div :class="['form-group', errors.name ? 'has-error' : '']">
            <!--<div class="form-group">-->
            <label>Full name</label>
                <input v-model="state.name" type="text" class="form-control">
                <span v-if="errors.name" class="label label-danger">{{ errors.name[0] }}</span>
                <!--<span class="label label-danger">{{ errors(errors.name) }}</span>-->
            </div>

            <div :class="['form-group', errors.email ? 'has-error' : '']">
            <!--<div class="form-group">-->
                <label>Email</label>
                <input v-model="state.email" type="email" class="form-control">
                <span v-if="errors.email" class="label label-danger">{{ errors.email[0] }}</span>
                <!--<span class="label label-danger">{{ errors(errors.email) }}</span>-->
            </div>

            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
                <!--<router-link :to="{ name: 'userIndex' }">Back to index</router-link>-->
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            errors: [],
            user: [],
            state: {
                name: '',
                email: ''
            }
        }
    },

    methods: {
        store(e) {
            axios.post(e.target.action, this.state).then(response => {
                this.errors = [];

                this.state = {
                    name: '',
                    email: ''
                }

                this.message = 'User has been created.';
            }).catch(error => {
                if (! _.isEmpty(error.response)) {
                    if (error.response.status = 422) {
                        this.errors = error.response.data;
                    }
                }
            });
        }
    }
}
</script>

And my controller: UserCOntroller.php

public function store(Request $request)
     {
         $this->validate($request, [
             'name'  => 'required|string|max:50',
             'email' => 'required|email|unique:users,email',
         ]);

         $user = User::create([
             'name'     => $request->name,
             'email'    => $request->email,
             'password' => bcrypt(str_random()),
         ]);

         return response()->json($user);
     }

When I type something similar to what ever existed(Unique), I get error text in console response, but not displaying in form like as usual. I get error in console like this:

{"email":["The email has already been taken."]}

how to display in form? What's wrong with my script?

any help ? thank you before..

@Demonyowh, what do you mean? script error in JS below vue tag template — muzamil indra
– muzamil indra, Commented Jun 6, 2017 at 4:14

Kzy · Accepted Answer · 2017-06-06 05:57:26Z

2

Hi I tried to replicate your script in my local. Works in me though. Can you try to debug object errors in catch. Send a sample result :)

if (error.response.status = 422) {
    this.errors = error.response.data;
    console.log(this.errors);                             
}

answered Jun 6, 2017 at 5:57

Kzy

5055 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

muzamil indra Over a year ago

i get response {email: ["The email has already been taken."]} and status 422 Unprocessable Entity

Kzy Over a year ago

Hi Kindly look at this fiddle. jsfiddle.net/khenxi/ev8wvg8p If this.errors really contains the proper output then it should display

Collectives™ on Stack Overflow

handling form validation error in laravel 5.4 + vueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related