Validation

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. Nếu có validation error phía server, bạn không trả các lỗi đó bằng JSON response 422. Thay vào đó, server redirect người dùng về trang form trước đó và flash validation error vào session. Một số framework như Laravel tự động thực hiện việc này. 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.

<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>

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>
  );
}

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

    let { errors = {} } = $props()

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

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

<form onsubmit={(e) => { e.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>

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.

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.

<p v-for="error in errors.email">{{ error }}</p>

{
  errors.email.map((error, index) => <p key={index}>{error}</p>);
}

{#each errors.email as error}
    <p>{error}</p>
{/each}

Bạn có thể cấu hình TypeScript để mong đợi 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 validation error, người dùng thường được redirect về trang form trước đó. Mặc định, Inertia tự động giữ component state 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 gửi 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 dùng form helper, bạn không cần dùng error bag vì validation error được tự động scope vào form object đã tạo request. Với trang có nhiều form, có thể xảy ra xung đột khi hiển thị validation error nếu hai form dùng chung tên field. Ví dụ form “tạo công ty” và form “tạo người dùng” đều có field name. Vì cả hai đều hiển thị validation error page.props.errors.name, lỗi validation của field name ở một form sẽ xuất hiện trê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.

import { router } from "@inertiajs/vue3";

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

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

import { router } from "@inertiajs/react";

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

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

import { router } from "@inertiajs/svelte";

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

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

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 v3 chính thức. 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.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Cách hoạt động

Chia sẻ lỗi

Hiển thị lỗi

Nhiều lỗi cho mỗi field

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

Error bag

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

​Cách hoạt động

​Chia sẻ lỗi

​Hiển thị lỗi

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

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

​Error bag

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

Cách hoạt động

Chia sẻ lỗi

Hiển thị lỗi

Nhiều lỗi cho mỗi field

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

Error bag

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