> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Validation

<Warning>Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem [hướng dẫn nâng cấp](/v3/getting-started/upgrade-guide) để bắt đầu.</Warning>

## Cách hoạt động

Việc xử lý lỗi validation phía máy chủ trong Inertia khác với form truyền thống điều khiển bằng XHR, nơi bạn phải bắt lỗi validation từ response `422` và tự cập nhật trạng thái lỗi của form — bởi Inertia không bao giờ nhận response `422`. Thay vào đó, Inertia hoạt động gần giống việc submit form tải toàn bộ trang thông thường. Cách thức như sau:

Trước tiên, bạn [submit form bằng Inertia](/v2/the-basics/forms). Nếu có lỗi validation phía máy chủ, bạn không trả các lỗi đó dưới dạng response JSON `422`. Thay vào đó, bạn redirect người dùng ở phía máy chủ về trang form trước đó và flash lỗi validation vào session. Một số framework như Laravel thực hiện tự động.

Tiếp theo, bất cứ khi nào các lỗi validation này tồn tại trong session, chúng sẽ tự động được chia sẻ với Inertia và trở thành page props ở phía client để bạn hiển thị trong form. Vì props có tính reactive, lỗi sẽ tự động được hiển thị khi quá trình submit form hoàn tất.

Cuối cùng, vì ứng dụng Inertia không bao giờ tạo response `422`, Inertia cần một cách khác để xác định response có chứa lỗi validation hay không. Inertia thực hiện việc này bằng cách kiểm tra object `page.props.errors` xem có lỗi nào tồn tại không. Nếu có lỗi, callback `onError()` của request sẽ được gọi thay cho callback `onSuccess()`.

## Chia sẻ lỗi

Để lỗi validation phía máy chủ có thể sử dụng ở phía client, framework phía máy chủ phải chia sẻ chúng thông qua prop `errors`. Các adapter chính thức của Inertia, chẳng hạn adapter Laravel, tự động thực hiện việc này. Với framework khác, bạn có thể phải tự cấu hình. Hãy tham khảo tài liệu của adapter phía máy chủ tương ứng để biết thêm thông tin.

## Hiển thị lỗi

Vì lỗi validation được cung cấp cho phía client dưới dạng props của page component, bạn có thể hiển thị có điều kiện dựa trên việc chúng có tồn tại hay không. Hãy nhớ rằng khi sử dụng các server adapter chính thức của Inertia (chẳng hạn adapter Laravel), prop `errors` sẽ tự động có sẵn trên trang.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <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>
  ```

  ```jsx React icon="react" theme={null}
  import { useState } from 'react'
  import { router, usePage } from '@inertiajs/react'

  export default function Edit() {
      const { errors } = usePage().props

      const [values, setValues] = useState({
          first_name: null,
          last_name: null,
          email: null,
      })

      function handleChange(e) {
          setValues(values => ({
              ...values,
              [e.target.id]: e.target.value,
          }))
      }

      function handleSubmit(e) {
          e.preventDefault()
          router.post('/users', values)
      }

      return (
          <form onSubmit={handleSubmit}>
              <label htmlFor="first_name">First name:</label>
              <input id="first_name" value={values.first_name} onChange={handleChange} />
              {errors.first_name && <div>{errors.first_name}</div>}
              <label htmlFor="last_name">Last name:</label>
              <input id="last_name" value={values.last_name} onChange={handleChange} />
              {errors.last_name && <div>{errors.last_name}</div>}
              <label htmlFor="email">Email:</label>
              <input id="email" value={values.email} onChange={handleChange} />
              {errors.email && <div>{errors.email}</div>}
              <button type="submit">Submit</button>
          </form>
      )
  }
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { router } from '@inertiajs/svelte'

      export let errors = {}

      let values = {
          first_name: null,
          last_name: null,
          email: null,
      }

      function handleSubmit() {
          router.post('/users', values)
      }
  </script>

  <form on:submit|preventDefault={handleSubmit}>
      <label for="first_name">First name:</label>
      <input id="first_name" bind:value={values.first_name}>
      {#if errors.first_name}<div>{errors.first_name}</div>{/if}

      <label for="last_name">Last name:</label>
      <input id="last_name" bind:value={values.last_name}>
      {#if errors.last_name}<div>{errors.last_name}</div>{/if}

      <label for="email">Email:</label>
      <input id="email" bind:value={values.email}>
      {#if errors.email}<div>{errors.email}</div>{/if}

      <button type="submit">Submit</button>
  </form>
  ```
</CodeGroup>

Khi sử dụng adapter Vue, bạn cũng có thể truy cập lỗi thông qua object `$page.props.errors`.

### Nhiều lỗi cho mỗi field

Mặc định, adapter Laravel của Inertia chỉ trả lỗi validation đầu tiên cho mỗi field. Bạn có thể chọn nhận toàn bộ lỗi bằng cách đặt property `$withAllErrors` thành `true` trong middleware.

```php theme={null}
class HandleInertiaRequests extends Middleware
{
    protected $withAllErrors = true;

    // ...
}
```

Khi bật, mỗi field chứa một mảng chuỗi lỗi thay vì một chuỗi duy nhất.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <p v-for="error in errors.email">{{ error }}</p>
  ```

  ```jsx React icon="react" theme={null}
  {errors.email.map((error, index) => <p key={index}>{error}</p>)}
  ```

  ```svelte Svelte icon="s" theme={null}
  {#each errors.email as error}
      <p>{error}</p>
  {/each}
  ```
</CodeGroup>

Bạn có thể [cấu hình TypeScript](/v2/advanced/typescript#error-values) để kỳ vọng mảng thay vì chuỗi.

## Khôi phục dữ liệu input

Mặc dù cách xử lý lỗi trong Inertia tương tự submit form tải toàn bộ trang, Inertia còn mang lại nhiều lợi ích hơn. Thực tế, bạn thậm chí không cần tự điền lại dữ liệu input cũ của form.

Khi xảy ra lỗi validation, người dùng thường được redirect về trang form trước đó. Mặc định, Inertia tự động giữ [state của component](/v2/the-basics/manual-visits#state-preservation) cho request `post`, `put`, `patch` và `delete`. Vì vậy, toàn bộ dữ liệu input cũ của form vẫn giữ nguyên như lúc người dùng submit.

Do đó, công việc còn lại duy nhất là hiển thị các lỗi validation bằng prop `errors`.

## Error bag

Nếu đang dùng [form helper](/v2/the-basics/forms#form-helper), không cần dùng error bag vì lỗi validation tự động được scope vào object form tạo request.

Với các trang có nhiều hơn một form, xung đột có thể xảy ra khi hiển thị lỗi validation nếu hai form dùng chung tên field. Ví dụ, hãy hình dung một form "tạo công ty" và một form "tạo người dùng" đều có field `name`. Vì cả hai form đều hiển thị lỗi validation `page.props.errors.name`, việc phát sinh lỗi validation cho field `name` ở bất kỳ form nào cũng khiến lỗi xuất hiện ở cả hai form.

Để giải quyết vấn đề này, bạn có thể sử dụng "error bag". Error bag giới hạn phạm vi các lỗi validation được máy chủ trả về bên trong một key duy nhất dành riêng cho form đó. Tiếp tục ví dụ trên, bạn có thể dùng error bag `createCompany` cho form thứ nhất và `createUser` cho form thứ hai.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

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

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

  ```js React icon="react" theme={null}
  import { router } from '@inertiajs/react'

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

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

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

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

  router.post('/users', data, {
      errorBag: 'createUser',
  })
  ```
</CodeGroup>

Khi chỉ định error bag, các lỗi validation từ máy chủ sẽ được trả về tương ứng trong `page.props.errors.createCompany` và `page.props.errors.createUser`.

***

## Tài liệu chính thức

Bài dịch này được đối chiếu từ [tài liệu Inertia.js v2 chính thức](https://inertiajs.com/docs/v2/the-basics/validation). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.