在进入多阶段表单的下一步之前，如何验证字段收益已填充？

Question

抱歉，我确定这是一个简单的解决方案。但是，社区过去一直很友善，所以我想看看是否有人可以为我指明正确的方向。我们利用外部软件来管理我们的数据库和托管我们的数据捕获表格。此解决方案限制我们在构建表单时调用字段收益。所以我的多步表单的 HTML 可能如下所示：<form id="form-1">                                          <fieldset id="step1">    <h3> Are you Male or Female?</h3><field-yield data-field="F_901_ONLINE_GENDER"></field-yield></fieldset><fieldset id="step2"  style="display:none">    <h3 style="font-family:poppins;"> Please tell us about you?</h3><field-yield data-field="F_3_FIRSTNAME"></field-yield><field-yield data-field="F_4_LASTNAME"></field-yield>                           </fieldset> <fieldset id="step3"  style="display:none;">    <h3> Please find your Address</h3>        <div data-option="UK_ADDRESS_LOOKUP">            <label data-db-localized-content="UK_ADDRESS_LOOKUP_LABEL"></label></form>系统具有内置检查，使该字段产生“必需”但是，这些似乎只对“提交按钮”进行操作，因此如果用户跳到最后，错过了第 1 步中的提交，表单不会提交，它也不显示编码到字段 yields 中的错误消息。可以想象，这是垃圾用户体验，因此我们丢失了很多表单完成。我想要实现的是验证每个步骤中的所有字段在进入下一步之前都已填充的代码，从而防止用户进入不起作用的提交按钮。这允许进度条工作，用于遍历表单的后退按钮和显示/隐藏每个步骤。我想在下面添加类似下面的内容来验证字段完成。if ($('input[name="F_901_ONLINE_GENDER"]').val() == '' && $('input[name="F_3_FIRSTNAME"]').val() == '' && $('input[name="F_4_LASTNAME"]').val() == ''){                        alert('Please complete all questions');但是，这不起作用，我不知道接下来要尝试什么。提前感谢您的任何帮助！

Answer 1

我不知道您的系统如何替换<field-yield>标签，但我想会有典型的表单字段。所以你需要编写一些通用的验证函数，它会一步一步验证所有字段，如果验证通过，则允许用户继续下一步。

在步骤中验证所有输入字段的函数：

function validateStep(step) {

    var stepWrapper = $('fieldset#step'+step);

    var emptyFields = 0;

    $('input[type="text"], select, textarea', stepWrapper).each(function(i, el) {

        if ($(el).val() == '') {

            emptyFields++;

            return false;

        }

    });

    //check radio buttons

    var radioGroups = {};

    //group radio buttons by name

    $(':radio', stepWrapper).each(function() {

        radioGroups[this.name] = true;

    });

    //count "checked" radio buttons in groups

    for (var radioName in radioGroups) {

        var checked = !!$(':radio[name="'+radioName+'"]:checked', stepWrapper).length;

        if (!checked) {

            emptyFields++;

        }

    }

    return emptyFields;

}

现在您有了步骤验证，您唯一需要做的就是在步骤更改之前调用此函数：

$("#next").click(function () {

    //validate before move

    if (validateStep(currentPage)) {

        alert("Please fill all fields before move to next step!");

        return false;

    }

    if (currentPage < maxPage) {

        var nextPage = currentPage + 1;

    } else {

        return; //if already at max page 

    }

    //... rest of your code

}

希望这对你有帮助。

更新： 这是您的页面表单的一个工作示例：https : //codepen.io/zur4ik/pen/LYYqjgM 我在每个循环中都有一个错误。