Laravel Validation with vue js

Question

i want to post ajax request using vue-resource this.$http.post request. it worked perfectly fine if i passed all validation rules but i want to get some validations if it fails. so far i keep getting 500 error if i don't fill out some input fields. it's hard for me to debug the error because it didn't appeared on the network tab.

here's what i've done so far

//my modal component
<script>
export default {
    props: ['show'],

    data() {
        return {
            input: {
                id: '',
                name: '',
                address: '',
                email: ''
            },
            errorInputs: {}
        }
    },

    methods: {
        createStudent() {
            this.$http.post('/students', this.$data.input)
                .then((response) => {
               alert('added new row!)
            }, (response) => {
                console.log(response.data);
            });
        }
      }
   }
</script>

// my controller

public function store(Request $request) {
    $validator = $this->validate($request,[
        'id' => 'required',
        'name' => 'required|unique:students',
        'email' => 'required|unique:students|email',
        'address' => 'required',
    ]);

    if($validator->passes()){
        Student::create($request->all());

        return response()->json([], 201);
    }

    $errors = json_decode($validator->errors());

    return response()->json([
        'success' => false,
        'message' => $errors
    ],422);
}

any helps and references would be appreciated. i am using laravel 5.3 and vue js 2

Maybe you have filters enabled on your network tab? Check if it's all (or xhr at least) marked on your tab. It'll help for sure. You can also check for logs in storage/log/laravel.log — Skysplit
– Skysplit, Commented Nov 13, 2016 at 0:10
yeah i realize that after posting my question, sorry. could you help me how to pass laravel validation into vue js component? i am stucked at this point. — ishadif
– ishadif, Commented Nov 13, 2016 at 0:24
What's the problem then? So far you're heading in good direction as far as I can see — Skysplit
– Skysplit, Commented Nov 13, 2016 at 0:27
i can't pass laravel validations data to vue component when validation fails. i want to display them in my template. i know laravel will send json response for ajax request but i can't get those data — ishadif
– ishadif, Commented Nov 13, 2016 at 0:39

Skysplit · Accepted Answer · 2016-11-13 00:54:12Z

2

$this->validate() returns 422 error response alongside your validation errors, so you should get those errors in then() second callback (like you do now). Your vue component body should be like this:

{
    data() {
        // ...
    },
    createStudent() {
        this.$http
            .post('/students', this.input)
            .then(this.handleSuccess, this.handleError)
    },
    handleSuccess(res) {
        alert('student created')
    },
    handleError(res) {
        if (res.status === 422) {
            this.errorInputs = res.body
        } else {
            alert('Unkown error!')
        }
    }
}

Remember to add v-model="input.fieldName" properties to your inputs.

answered Nov 13, 2016 at 0:54

Skysplit

1,93312 silver badges16 bronze badges

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

3 Comments

ishadif Over a year ago

thank you but i still get 500 somehow. there's something wrong on my laravel code i think. i'll comeback to you later

ishadif Over a year ago

apparently i have changed render function on handler.php to throw exception before this code return parent::render($request, $exception);. that's why I keep getting 500 error. validation in vue side works properly now

Skysplit Over a year ago

@ishadif Geat to hear that! Hopefully my answer helped you at least a little bit :)

Alex · Accepted Answer · 2017-06-28 01:30:25Z

0

Remember to include your session token along with your post, unless of course you are disabling csrf tokens for that route.

Since Laravel 5.1 you can disable this in your verifytoken middleware

 <?php namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as ...

class VerifyCsrfToken extends ...    {
  protected $except = [
    'payment/*',
  ];
}

answered Jun 28, 2017 at 1:30

Alex

5565 silver badges8 bronze badges

Collectives™ on Stack Overflow

Laravel Validation with vue js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related