> ## 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>Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo [tài liệu v3](/v3/getting-started/index).</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 [gửi form bằng Inertia](/v1/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ủ trở lại trang form trước đó và flash các lỗi validation vào session. Một số framework như Laravel thực hiện việc này 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 2 icon="vuejs" theme={null}
  <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>

  <script>
  import { router } from '@inertiajs/vue2'

  export default {
      props: {
          errors: Object,
      },
      data() {
          return {
              form: {
                  first_name: null,
                  last_name: null,
                  email: null,
              },
          }
      },
      methods: {
          submit() {
              router.post('/users', this.form)
          },
      },
  }
  </script>
  ```

  ```vue Vue 3 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 for="first_name">First name:</label>
              <input id="first_name" value={values.first_name} onChange={handleChange} />
              {errors.first_name && <div>{errors.first_name}</div>}
              <label for="last_name">Last name:</label>
              <input id="last_name" value={values.last_name} onChange={handleChange} />
              {errors.last_name && <div>{errors.last_name}</div>}
              <label for="email">Email:</label>
              <input id="email" value={values.email} onChange={handleChange} />
              {errors.email && <div>{errors.email}</div>}
              <button type="submit">Submit</button>
          </form>
      )
  }
  ```

  ```html 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`.

## 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 trở lại trang form trước đó. Mặc định, Inertia tự động giữ lại [state của component](/manual-visits#state-preservation) cho các 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ư thời điểm người dùng submit form.

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 sử dụng [form helper](/forms#form-helper), bạn không cần dùng error bag vì lỗi validation được tự động giới hạn phạm vi trong 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 2 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue2'

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

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

  ```js Vue 3 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 v1 chính thức](https://inertiajs.com/docs/v1/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.