Handle Laravel Validation Errors using VueJs - 422 (Unprocessable Entity)

Question

I am using Larvel 5.3 with VueJS@2 and Axios to perform post ajax request to server.

My problem is that I am unable to get laravel form validation errors. while debugging i found that firebug console was showing 422 (Unprocessable Entity) error and that is Natural because server isn't getting the expected values. But, I need to get those validation errors and show at my form.

Here is my VueJS Part

new Vue({
    el: '#blogWrap',
    data: {
        formInputs: {},
        formErrors: {}
    },
    methods: {
        onSubmit: function () {
            var csrfToken = document.querySelector('input[name="_token"]').value;
            console.log(this.formInputs);
            axios.post("/createpost", this.formInputs, {
                headers: {'X-CSRF-TOKEN': csrfToken }
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (data, status, request) {
                console.log(data);
                this.formErrors = data.data;
            });

        }
    }
})

i follwed the following link but unable to solve 422 error. http://taha-sh.com/blog/setting-up-ajax-validation-with-laravel-vuejs-in-no-time

So you can then do <span v-if="formErrors.title">{{ formErrors.title }}</span> in your template code for each form field. — Joe
– Joe, Commented Mar 10, 2017 at 14:03

Valter Lorran · Accepted Answer · 2017-03-10 19:49:23Z

0

The function then expects 2 callbacks, the first is the success(http status 200) and second is any other http status.

this.$http.post('url',data)
.then(success => {
    // no errors
}, error => {
    // error
    if(error.code == 422){
        console.log(error.data)
    }
})

answered Mar 10, 2017 at 19:49

Valter Lorran

1082 silver badges8 bronze badges

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

1 Comment

Ismail Ansari Over a year ago

Thanks @valter-lorran

Collectives™ on Stack Overflow

Handle Laravel Validation Errors using VueJs - 422 (Unprocessable Entity)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related