Laravel Inertia - Validation

유효성 검증

작동 방식

Inertia에서 서버 측 유효성 검증 오류를 처리하는 방법은 전통적인 XHR 기반 폼과 다릅니다. XHR 기반 폼에서는 422 응답에서 유효성 검증 오류를 캐치하고 폼의 오류 상태를 수동으로 업데이트해야 하지만, Inertia에서는 422 응답을 받지 않습니다. 대신, Inertia는 전통적인 전체 페이지 폼 제출과 매우 유사하게 작동합니다. 아래는 그 방법입니다:

먼저, Inertia를 사용하여 폼을 제출합니다. 서버 측 유효성 검증 오류가 있는 경우, 이러한 오류를 422 JSON 응답으로 반환하지 않습니다. 대신, 유저를 이전에 있던 폼 페이지로 리다이렉트하고 세션에 유효성 검증 오류를 플래시합니다. Laravel과 같은 일부 프레임워크는 이를 자동으로 처리합니다.

다음으로, 세션에 이러한 유효성 검증 오류가 있을 때마다, Inertia가 자동으로 이를 공유하여 클라이언트 측에서 페이지 props로 사용할 수 있게 됩니다. props는 반응적이므로 폼 제출이 완료되면 자동으로 표시됩니다.

마지막으로, Inertia 앱은 422 응답을 생성하지 않기 때문에, 응답에 유효성 검증 오류가 포함되어 있는지를 다른 방법으로 확인해야 합니다. 이를 위해 Inertia는 page.props.errors 객체에 오류가 있는지를 확인합니다. 오류가 있을 경우, 요청의 onError() 콜백이 onSuccess() 콜백 대신 호출됩니다.

오류 공유

서버 측 유효성 검증 오류가 클라이언트 측에서 사용할 수 있도록 하려면, 서버 측 프레임워크가 이를 errors prop을 통해 공유해야 합니다. Laravel 어댑터와 같은 Inertia의 공식 어댑터는 이를 자동으로 수행합니다. 다른 프레임워크를 사용하는 경우, 이를 수동으로 수행해야 할 수도 있습니다. 자세한 내용은 특정 서버 측 어댑터 문서를 참조하세요.

오류 표시

유효성 검증 오류는 클라이언트 측에서 페이지 컴포넌트 props로 제공되므로, 오류의 존재 여부에 따라 조건부로 표시할 수 있습니다. Laravel 어댑터와 같은 공식 서버 어댑터를 사용할 때는 errors prop이 페이지에 자동으로 제공됩니다.

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

defineProps({ errors: Object })

const form = reactive({
  first_name: null,
  last_name: null,
  email: null,
})

function submit() {
  router.post('/users', form)
}
</script>

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <div v-if="errors.first_name">{{ errors.first_name }}</div>
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <div v-if="errors.last_name">{{ errors.last_name }}</div>
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <div v-if="errors.email">{{ errors.email }}</div>
    <button type="submit">Submit</button>
  </form>
</template>

Vue 어댑터를 사용할 때는 $page.props.errors 객체를 통해 오류에 접근할 수도 있습니다.

입력값 재입력

Inertia에서 오류 처리는 전체 페이지 폼 제출과 유사하지만, 더 많은 이점을 제공합니다. 실제로 오래된 폼 입력 데이터를 수동으로 재입력할 필요가 없습니다.

유효성 검증 오류가 발생하면, 사용자는 일반적으로 이전에 있던 폼 페이지로 리다이렉트됩니다. 기본적으로 Inertia는 post, put, patch, delete 요청에 대해 컴포넌트 상태를 자동으로 보존하므로, 폼의 모든 오래된 입력 데이터는 사용자가 폼을 제출했을 때와 정확히 같은 상태로 유지됩니다.

따라서 남은 작업은 errors prop을 사용하여 유효성 검증 오류를 표시하는 것입니다.

오류 가방(Error Bags)

폼 도우미를 사용하는 경우 오류 가방을 사용할 필요가 없습니다. 유효성 검증 오류는 자동으로 요청을 생성하는 폼 객체에 범위가 지정됩니다.

하지만 한 페이지에 두 개 이상의 폼이 있는 경우, 동일한 필드 이름을 공유하는 두 폼 사이에 유효성 검증 오류를 표시하는 데 충돌이 발생할 수 있습니다. 예를 들어, name 필드를 가진 "회사 생성" 폼과 "사용자 생성" 폼이 있을 때, 두 폼 모두 page.props.errors.name 유효성 검증 오류를 표시합니다. 따라서 한 폼의 name 필드에 유효성 검증 오류가 발생하면 두 폼 모두에 오류가 표시됩니다.

이 문제를 해결하기 위해 "오류 가방(Error Bags)"을 사용할 수 있습니다. 오류 가방은 서버에서 반환된 유효성 검증 오류를 특정 폼에 대한 고유 키로 범위를 지정합니다. 위의 예에서, 첫 번째 폼에는 createCompany, 두 번째 폼에는 createUser 오류 가방을 사용할 수 있습니다.

import { router } from '@inertiajs/vue3'

router.post('/companies', data, {
  errorBag: 'createCompany',
})

router.post('/users', data, {
  errorBag: 'createUser',
})

오류 가방을 지정하면 유효성 검증 오류가 page.props.errors.createCompany 및 page.props.errors.createUser 내에서 서버에서 반환됩니다.