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

Question

抱歉，我确信这是一个简单的解决方案。 但是，社区过去一直很友善，所以我想我会看看是否有人可以为我指明正确的方向。

我们使用外部软件来管理我们的数据库和托管我们的数据捕获 forms。 此解决方案限制我们在构建 forms 时调用字段产量。

所以我的 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>
            <div class="input">
                <input class="PCODE" name="UK_ADDRESS_LOOKUP_POSTCODE" type="text" placeholder="" data-db-localized-placeholder="UK_ADDRESS_LOOKUP_PLACEHOLDER" value=""required><br>
                <button class="mbbutton" type="button" data-db-localized-content="UK_ADDRESS_LOOKUP_LOOKUP_BUTTON"></button> <br>

                <select class="form-control" name="UK_ADDRESS_LOOKUP_ADDRESS" type="text" placeholder="" required>
                    <option is-placeholder data-db-localized-content="UK_ADDRESS_LOOKUP_ADDRESS_PLACEHOLDER"></option>
                </select>
            </div> <br><br>
        </div><field-yield data-field="F_9_TOWNCITY"></field-yield><field-yield data-field="F_6_ADDRESS1"></field-yield><field-yield data-field="F_11_POSTCODE"></field-yield>
<input type="submit"style="display:none;" data-db-localized-value="FORM_SUBMIT">
</fieldset>


<div class="col-12">
<br>
<button type="button" id="next">Start Quote!</button>
<p style="height: 40px;text-align:left;padding-left: 10px;padding-bottom: 0px;margin-bottom: -25px;"><button class="customBackBtn previous shadow" style="display:none;font-size:15px!important" id="previous" type="button"> <i class="fas fa-arrow-circle-left"></i> <strong>Back</strong></button></p><br>

</form>

系统具有使该字段产生“必需”的内置检查但是，这些似乎仅在“提交按钮”上操作，因此如果用户跳过到最后，错过了第 1 步中的一个文件，则表单不会提交，它也不显示编码到字段产量中的错误消息。

正如你可以想象的那样，这是垃圾用户体验，所以我们丢失了很多表单完成。

我希望实现的是验证每个步骤中的所有字段在进入下一步之前都已填充的代码，从而防止用户进入不会 function 的提交按钮。

当前的JS是：

$(function () {

    var currentPage = 1;
    var maxPage = 3; //if additional fieldset steps add the max page here i.e., if 7 pages maxPage = 7

    $("#next").click(function () {
        if (currentPage < maxPage) {
            var nextPage = currentPage + 1;
        } else {
            return; //if already at max page 
        }


        trackProgress(100 * ((nextPage - 1) / maxPage).toFixed(1) + '%'); //get rid of decimal points (make a whole number)
        $("#step" + currentPage).hide();
        $("#step" + nextPage).show();
        $("#previous").show();


        currentPage = nextPage;
        if (currentPage === maxPage) {
            $('#next').hide()
            $('input[type="submit"]').delay(2000).show(0);
            $('#thanks').delay(2000).show(0);

            // Show submit button & thank you paragraph
        }
    });

    $("#previous").click(function () {
        if (currentPage !== 1) {
             $('#spinner').removeClass('hidden')
            var prevPage = currentPage - 1;
        } else {
            return;
        }

        trackProgress(100 * ((prevPage - 1) / maxPage).toFixed(1) + '%');
        $("#step" + currentPage).hide();
        $("#step" + prevPage).show();
        $('input[type="submit"]').hide();
        $('#thanks').hide();
        $("#next").show();

        currentPage = prevPage;
        if (currentPage === 1) {
            $('#previous').hide()
        }
    })

});

这允许进度条工作，用于遍历表单的后退按钮和显示/隐藏每个步骤。 我想在以下内容中添加类似以下内容以验证字段完成。

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，它将一步一步验证所有字段，如果验证通过，则允许用户继续下一步。

Function 在步骤中验证所有输入字段：

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;
}

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

$("#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我在每个循环中都有一个错误。