我使用InertiaJS和Laravel创建了一个Web应用程序,并创建了一个多步骤表单。对于表单,我使用了Inertia helper useForm
。现在,当单击按钮进入下一步时,我想向验证控制器发送表单的验证请求。我问自己如何才能实现这一点。
首先,我想我可以这样做:
form
.transform((data) => ({
...data,
step : activeStepIndex.value,
}))
.post(route('setup.validate'), {
preserveState: true,
preserveScroll: true,
});
字符串
这似乎发送了一个请求,但端点正在发送302响应,根据文档,据我所知,我需要做一个重定向-https://inertiajs.com/redirects/https://inertiajs.com/forms#submitting-forms
然后我想,我可以使用一个经典的axios调用。这里我有一个问题,我提交整个表单到验证表单请求,因此我需要这样的验证规则:
return match ($this->input('step')) {
'0' => [
'form.company' => ['required', 'string', 'max:255'],
],
default => [
// Default rules if 'section' doesn't match any case.
],
};
型
现在的问题是,响应有一个名为“form.company“的键,但响应必须只是“company”,因为我通过Inertia表单form.errors.company
访问了这样的错误。
因此,在我的axios调用中,我需要将响应中的错误Map到Inertia对象的形式错误:
catch((error) => {
form.errors = error.response.data.errors;
});
型
但正如我所说,这不起作用,因为键没有嵌套到:
"form" : {
"company":
型
它是:
"form.company"
型
现在我问自己这里的正确解决方案是什么?我应该使用另一种惯性方法,还是axios是正确的方法?当使用axios时,我可以以某种方式返回“company”作为键而不是form.company
吗?或者我需要在JS端解析响应,手动拆分键form.company
,等等?
有人能帮忙吗?
1条答案
按热度按时间czq61nw11#
我也面临着同样的问题,我唯一能想到的解决办法就是使用一个库来验证前端的表单,比如https://vuelidate-next.netlify.app/,(长度检查,正则表达式,必填字段,如果当前的tone还没有完成,则不允许用户进行下一步),然后进行后端验证,因为对于相同的规则+任何不能在前端检查的内容-结束像用户名存在.