Validation

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

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

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

import { router } from '@inertiajs/vue2'

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

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

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',
})