Are you looking to validate something? It's advisable to rely on Laravel or HTML for validation as they can handle most scenarios.
Nevertheless, you can create a custom error using JavaScript in the front-end with the form helper like this:
<template>
<div>
<span v-if="form.errors.name" class="mt-1 text-sm text-red-700">
{{ form.errors.name }}
</span>
</div>
</template>
<script setup>
const form = useForm({
name: null,
})
const submitForm = () => {
if(/*logic for triggering the error*/){
form.setError('name', 'The name is invalid');
}
}
</script>
If you wish to send a custom error from your controller, follow the same approach but pass the field and error message as props. You could return an error like so:
//controller
return back()->with([
'customError' => [
'field' => 'name',
'message' => 'The name is invalid',
]
]);
Then on the front-end:
<template>
<div>
<span v-if="form.errors.name" class="mt-1 text-sm text-red-700">
{{ form.errors.name }}
</span>
</div>
</template>
<script setup>
import { computed } from 'vue';
import { usePage} from '@inertiajs/vue3';
const page = usePage();
const customError = computed(() => page.props.customError);
const form = useForm({
name: null,
})
const submitForm = () => {
if(/*your logic for invoking the error*/){
form.setError(
customError.value.field,
customError.value.message
);
}
}
</script>
If you want to make your customError available as a prop for all inertia requests, check out 'Flash messages' here:
Learn more about the form helper here: