使用 Jquery Validation 插件的 MultiStep 表单客户端验证

Posted 2023-05-09

【中文标题】使用 Jquery Validation 插件的 MultiStep 表单客户端验证

【英文标题】：MultiStep form Client validation using Jquery Validation plugin

【发布时间】：2021-03-10 05:59:09

【问题描述】：

我需要构建一个基于 mvc 的多步骤应用程序表单，该表单将包含 4 个步骤：- 基本细节、联系细节、运营细节、车辆细节。

基本包含 - 基本用户信息，例如姓名、出生日期。

联系地址、邮寄地址、送货地址、电话

操作-一些带有推理的是/否问题

车辆-这是添加多个车辆详细信息的部分。

每个部分都用一个 div 分隔。我需要验证 1 个部分，然后才移动到下一个部分，即填充后的基本详细信息部分将被验证，然后才移动到我需要客户端验证的联系人详细信息部分。

我需要使用 Jquery 验证插件而不是自定义验证，但 jquery 验证的问题是它适用于完整的表单，在我的情况下，验证是一次一个部分，而不是单个表单。 对以上内容的任何输入都会有所帮助。

问候。

【参考方案1】：

您可以为每个部分使用一个表单来进行 js 验证。然后当你提交或者你在最后一个部分。然后点击提交，你手动构建一个表单并提交给客户端。

这里是一个关于如何通过 js 构建和提交表单的示例。 这个例子取自here

function autoLogIn(un, pw) 
    var form = document.createElement("form");
    var element1 = document.createElement("input"); 
    var element2 = document.createElement("input");  

    form.method = "POST";
    form.action = "login.php";   

    element1.value=un;
    element1.name="un";
    form.appendChild(element1);  

    element2.value=pw;
    element2.name="pw";
    form.appendChild(element2);

    form.submit();

您还可以在此处查看其他示例，Multiple step form with jQuery validation

【讨论】：

：非常感谢您的意见。这就是我一直在寻找的。我可以在最后一部分构建一个新表单。