Почему не возвращаются данные валидации inertia js + vue?

Question

[iamdivine]

Без валидации форма проходит, данные записываются, но с валидацией ( специально неверно заполняю) не возвращаются ошибки. Если отловить реквест, то ошибки валидации возвращаются.

<template>
    <title>
        Добавить кандидата</title>
    <Navbar />
    <MDBRow center style="margin-bottom: 3%; margin-top: 3%;">
        <MDBCol md="6">
            <div class="card">
                <div class="card-body">
                    <form @submit.prevent="submit">
                        <div v-if="errors.nickname">{{ errors.nickname }}sdfsdf</div>
                        <MDBInput type="text" label="Игровой ник" id="nickname" v-model="form.nickname" wrapperClass="mb-4" />
                        <MDBInput type="text" label="Реальное имя" id="real_name" v-model="form.real_name" wrapperClass="mb-4" />
                        <MDBInput type="text" label="Лидерства" id="leaderships" v-model="form.leaderships" wrapperClass="mb-3" />
                        <MDBInput type="text" label="Форумный аккаунт" id="forum_link" v-model="form.forum_link" wrapperClass="mb-3" />
                        <div v-if="errors.vkontakte">{{ errors.vkontakte }}</div>
                        <MDBInput type="text" label="Вконтакте" id="vkontakte" v-model="form.vkontakte" wrapperClass="mb-3" />
                        <MDBInput type="text" label="О кандидате" id="about" v-model="form.about" wrapperClass="mb-3" />
                        <MDBRow class="mb-1">
                            <MDBCol class="d-flex justify-content-center">
                                <MDBBtnGroup>
                                    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Администратор" name="options" value="1" v-model="form.type" />
                                    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Помощник" name="options" value="2" v-model="form.type" />
                                </MDBBtnGroup>
                            </MDBCol>
                            <MDBCol class="d-flex justify-content-center">
                                <MDBBtn type="submit" style="max-width: 80%;" color="primary" block> Начать выдвижение кандидата </MDBBtn>
                            </MDBCol>
                        </MDBRow>
                    </form>
                </div>
            </div>
        </MDBCol>
    </MDBRow>
</template>

<script>
    import Navbar from '../Components/Navbar.vue';
    import {
        MDBRow,
        MDBCol,
        MDBInput,
        MDBCheckbox,
        MDBBtn,
        MDBIcon,
        MDBRadio,
        MDBBtnGroup
    } from "mdb-vue-ui-kit";
    export default {
        props: {
            errors: Object,
        },
        components: {
            'Navbar': Navbar,
            MDBRow,
            MDBCol,
            MDBInput,
            MDBCheckbox,
            MDBBtn,
            MDBIcon,
            MDBRadio,
            MDBBtnGroup
        },
        data() {
            return {
                form: {
                    nickname: '',
                    real_name: '',
                    leaderships: '',
                    vkontakte: '',
                    about: '',
                    forum_link: '',
                    type: 1
                }
            }
        },
        methods: {
            submit() {
                this.$inertia.post('/add', this.form)
            },
        },
    }
</script>

ublic function store(Request $request) {
        $valid = $request->validate(
            [
                'nickname'      => ['required','max:64','string'],
                'real_name'     => ['required','max:64','string'],
                'about'         => ['required','max:512','string'],
                'type'          => ['required','integer','max:4'],
                'forum_link'    => ['required','url'],
                'vkontakte'     => ['required','url'],
                'leaderships'   => ['required','string','max:512']
            ],
            [
                'nickname.required'     => 'Поле никнейм должно быть заполнено',
                'nickname.max'          => 'Максимум 64 символа',
                'nickname.string'       => 'Никнейм должен быть строкой',
                'real_name.required'    => 'Поле имя должно быть заполнено',
                'real_name.max'         => 'Максимум 64 символа',
                'real_name.string'      => 'Поле должно быть строкой',
                'about.required'        => 'Поле должно быть заполнено',
                'about.max'             => 'Максимум 512 символов',
                'about.string'          => 'Поле должно быть строкой',
                'type.required'         => 'Не выбран тип выдвижения',
                'vkontakte.required'    => 'Не указан вконтакте',
                'vkontakte.url'         => 'Вконтакте должен быть ссылкой',
                'leaderships.required'  => 'Лидерства должны быть заполнены',
                'leaderships.string'    => 'Error',
                'leaderships.max'       => 'Максимум 512 символов'
            ]
        );
        Conversation::query()->create([
            'user_id'       => Auth::id(),
            'nickname'      => $valid['nickname'],
            'about'         => $valid['about'],
            'real_name'     => $valid['real_name'],
            'leaderships'   => $valid['leaderships'],
            'who_close'     => null,
            'type'          => $valid['type'],
            'vkontakte'     => $valid['vkontakte'],
            'forum_link'    => $valid['forum_link']
        ]);
    }

Comments

[Дмитрий]

что вам отвечает сервер когда вы шлете ему запрос с ошибкой в данных?

Answer 1

[Valeriu Cuțebov]

Если я правильно понял, что ошибка валидации возвращается при отлове реквеста, то проблема, вероятно, связана с тем, что вы не передаете ошибки обратно в представление после валидации.

Чтобы исправить эту проблему, вам нужно передать ошибки обратно в представление, чтобы они могли быть отображены. В вашем коде я вижу, что у вас есть props errors в компоненте, который вы можете использовать для передачи ошибок из контроллера в представление.

Попробуйте изменить функцию store в контроллере следующим образом, чтобы передать ошибки в представление:

public function store(Request $request) {
    $valid = $request->validate(
        [
            'nickname'      => ['required','max:64','string'],
            'real_name'     => ['required','max:64','string'],
            'about'         => ['required','max:512','string'],
            'type'          => ['required','integer','max:4'],
            'forum_link'    => ['required','url'],
            'vkontakte'     => ['required','url'],
            'leaderships'   => ['required','string','max:512']
        ],
        [
            'nickname.required'     => 'Поле никнейм должно быть заполнено',
            'nickname.max'          => 'Максимум 64 символа',
            'nickname.string'       => 'Никнейм должен быть строкой',
            'real_name.required'    => 'Поле имя должно быть заполнено',
            'real_name.max'         => 'Максимум 64 символа',
            'real_name.string'      => 'Поле должно быть строкой',
            'about.required'        => 'Поле должно быть заполнено',
            'about.max'             => 'Максимум 512 символов',
            'about.string'          => 'Поле должно быть строкой',
            'type.required'         => 'Не выбран тип выдвижения',
            'vkontakte.required'    => 'Не указан вконтакте',
            'vkontakte.url'         => 'Вконтакте должен быть ссылкой',
            'leaderships.required'  => 'Лидерства должны быть заполнены',
            'leaderships.string'    => 'Error',
            'leaderships.max'       => 'Максимум 512 символов'
        ]
    );

    Conversation::query()->create([
        'user_id'       => Auth::id(),
        'nickname'      => $valid['nickname'],
        'about'         => $valid['about'],
        'real_name'     => $valid['real_name'],
        'leaderships'   => $valid['leaderships'],
        'who_close'     => null,
        'type'          => $valid['type'],
        'vkontakte'     => $valid['vkontakte'],
        'forum_link'    => $valid['forum_link']
    ]);

    return back()->withErrors($valid);
}

Для того чтобы получить ошибки в вашем компоненте, вы можете воспользоваться props, которые были переданы в компонент.

В вашем коде вы передаете errors в качестве props в компонент. Чтобы отображать ошибки валидации, вам нужно проверить, есть ли ошибки в объекте errors, который передается в props.

Также, во втором коде, в представлении нужно обращаться к ошибкам валидации через метод errors вместо props.errors, поэтому код должен выглядеть так:

<template>
    <title>Добавить кандидата</title>
    <Navbar />
    <MDBRow center style="margin-bottom: 3%; margin-top: 3%;">
        <MDBCol md="6">
            <div class="card">
                <div class="card-body">
                    <form @submit.prevent="submit">
                        <div v-if="errors.has('nickname')">{{ errors.first('nickname') }}</div>
                        <MDBInput type="text" label="Игровой ник" id="nickname" v-model="form.nickname" wrapperClass="mb-4" />
                        <div v-if="errors.has('real_name')">{{ errors.first('real_name') }}</div>
                        <MDBInput type="text" label="Реальное имя" id="real_name" v-model="form.real_name" wrapperClass="mb-4" />
                        <div v-if="errors.has('about')">{{ errors.first('about') }}</div>
                        <MDBInput type="text" label="О кандидате" id="about" v-model="form.about" wrapperClass="mb-3" />
                        <div v-if="errors.has('type')">{{ errors.first('type') }}</div>
                        <MDBRow class="mb-1">
                            <MDBCol class="d-flex justify-content-center">
                                <MDBBtnGroup>
                                    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Администратор" name="options" value="1" v-model="form.type" />
                                    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Помощник" name="options" value="2" v-model="form.type" />
                                </MDBBtnGroup>
                            </MDBCol>
                            <MDBCol class="d-flex justify-content-center">
                                <MDBBtn type="submit" style="max-width: 80%;" color="primary" block> Начать выдвижение кандидата </MDBBtn>
                            </MDBCol>
                        </MDBRow>
                    </form>
                </div>
            </div>
        </MDBCol>
    </MDBRow>
</template>

Обратите внимание на использование has и first методов вместо nickname и real_name, которые передаются в качестве ключей в массиве ошибок валидации.

Надеюсь, это поможет вам решить проблему с отображением ошибок валидации в вашем приложении.

Comments

[iamdivine]

Спасибо большое за ответ.

return redirect()->back()->with('errors', $valid->errors());

После валидации объект превращается в массив и поэтому я не смогу передать ошибки таким образом

[Valeriu Cuțebov]

iamdivine, Да, вы правы. После вызова метода errors() у объекта Validator, мы получаем массив ошибок валидации.

Таким образом, правильнее будет использовать метод withErrors вместо with при возвращении редиректа, чтобы передать массив ошибок валидации в представление:

return redirect()->back()->withErrors($valid->errors());

В представлении, как я уже упоминал ранее, вы можете обращаться к ошибкам валидации через метод errors, например:

<div v-if="errors.has('nickname')">{{ errors.first('nickname') }}</div>

Я извиняюсь за возможное недопонимание в предыдущем ответе.

[Дмитрий]

Valeriu Cuțebov,
Мне кажется вы не правильно поняли. Для того что бы работала ваша конструкция - нужно обрачивать $request->validate в try catch. Ибо при ошибки валидации request->validate() выбрасывает ValidationException который отлалвивается на уровне src/Illuminate/Foundation/Exceptions/Handler.php где он сам пробросит все что надо

/**
     * Convert a validation exception into a response.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Illuminate\Validation\ValidationException  $exception
     * @return \Illuminate\Http\Response
     */
    protected function invalid($request, ValidationException $exception)
    {
        return redirect($exception->redirectTo ?? url()->previous())
                    ->withInput(Arr::except($request->input(), $this->dontFlash))
                    ->withErrors($exception->errors(), $request->input('_error_bag', $exception->errorBag));
    }

Сие можно лекго проверить

public function store(Request $request) {
        try{
    $valid = $request->validate(
        [
            'nickname'      => ['required','max:64','string'],
            'real_name'     => ['required','max:64','string'],
            'about'         => ['required','max:512','string'],
            'type'          => ['required','integer','max:4'],
            'forum_link'    => ['required','url'],
            'vkontakte'     => ['required','url'],
            'leaderships'   => ['required','string','max:512']
        ],
        [
            'nickname.required'     => 'Поле никнейм должно быть заполнено',
            'nickname.max'          => 'Максимум 64 символа',
            'nickname.string'       => 'Никнейм должен быть строкой',
            'real_name.required'    => 'Поле имя должно быть заполнено',
            'real_name.max'         => 'Максимум 64 символа',
            'real_name.string'      => 'Поле должно быть строкой',
            'about.required'        => 'Поле должно быть заполнено',
            'about.max'             => 'Максимум 512 символов',
            'about.string'          => 'Поле должно быть строкой',
            'type.required'         => 'Не выбран тип выдвижения',
            'vkontakte.required'    => 'Не указан вконтакте',
            'vkontakte.url'         => 'Вконтакте должен быть ссылкой',
            'leaderships.required'  => 'Лидерства должны быть заполнены',
            'leaderships.string'    => 'Error',
            'leaderships.max'       => 'Максимум 512 символов'
        ]
    );
        }catch (\Throwable $exception){
            dd($exception);
        }

    Conversation::query()->create([
        'user_id'       => Auth::id(),
        'nickname'      => $valid['nickname'],
        'about'         => $valid['about'],
        'real_name'     => $valid['real_name'],
        'leaderships'   => $valid['leaderships'],
        'who_close'     => null,
        'type'          => $valid['type'],
        'vkontakte'     => $valid['vkontakte'],
        'forum_link'    => $valid['forum_link']
    ]);

    return back()->withErrors($valid);
}

[Valeriu Cuțebov]

Дмитрий, Да, вы правы, я понимаю вашу точку зрения теперь. При использовании try-catch вы сможете перехватывать исключение ValidationException, которое выбрасывается при неудачной валидации. Тогда вы можете передавать ошибки обратно в представление через withErrors() метод, как вы и показали в последнем коде.

Спасибо за уточнение!

[Дмитрий]

Valeriu Cuțebov, только зачем? Зачем нам дублировать поведение которое у нас изначально?

[iamdivine]

К сожалению ни один ответ не решает проблемы, я вот старался делать как тут указано
https://inertiajs.ru/validation

[Дмитрий]

iamdivine, потому что надо сначала понять что происходит. а для этого надо посмотреть что отправляется при ошибочных данных, и что отвечает сервер

[hint000]

Дмитрий, вы посмотрите на это другими глазами, если я скажу, что этот ответ и комментарии сгенерированы ChatGPT?

[Дмитрий]

hint000, хех. Похоже на правду. Слишком вежливо для человека