Accordion Form：在启用下一步之前检查必填字段

Posted 2023-05-09

【中文标题】Accordion Form：在启用下一步之前检查必填字段

【英文标题】：Accordion Form: Check required fields before enabling next step

【发布时间】：2021-08-25 15:08:16

【问题描述】：

我有一个手风琴风格的表格。 每一步都在自己的手风琴中。

https://mci.bitpix.co.uk/builder

我想在下一个按钮可用之前检查所有字段是否已填写。

任何人都可以为我指出第一步的正确方向，然后在其余步骤中重复。

提前致谢

【参考方案1】：

你的链接给了我一个错误，所以我可以给你的代码有限，但你可以用几种不同的方式来处理这个问题。

根据您的问题，我假设按钮已禁用，因此您可以使用 jquery 验证字段 onchange() 并在填写完所有内容后从按钮中删除禁用的标签。

我会考虑使用AJAX API 添加一个处理程序来验证字段并在成功开始下一步时推送部分更新。您可以将粗略的代码用作您的组件或页面的 php 部分的起点

function onSubmitFirstAccordion()

    $validator = Validator::make(
    [
        'name' => 'Joe',
        'password' => 'lamepassword',
        'email' => '[e-mail]'
    ],
    [
        'name' => 'required',
        'password' => 'required|min:8',
        'email' => 'required|email|unique:users'
    ]
    );
   if ($validator->fails()) 
       throw new AjaxException([
         $validator->messages()
       ]);
    else 
      return [
        '#myDiv' => $this->renderPartial('mypartial')
      ];
   

按钮的代码包括：

<!-- Attributes API -->
<button data-request="onSubmitFirstAccordion" data-request-validate>Next Step</button>