Validation

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 để bắt đầu.

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

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

    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>

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 để 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 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, 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.

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