javascript - 在以多阶段形式进入下一步之前，我如何验证 field-yield 是否已填充？

Question

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

我们使用一个外部软件来管理我们的数据库和托管我们的数据捕获表单。该解决方案限制我们在构建表单时调用字段 yield。

所以我的多步骤表单 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 步提交的表单，则表单不会提交，它也不显示编码到字段 yields 中的错误消息。

如您所想，这是垃圾用户体验，因此我们丢失了很多表单完成。

我想要实现的是代码，在进入下一步之前验证每个步骤中的所有字段都已填充，防止用户进入无法正常工作的提交按钮。

当前的 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 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我在每个循环中都犯了一个错误。