Javascript 在以多阶段形式进入下一步之前，我如何验证是否填充了油田产量？

很抱歉，我相信这是一个简单的解决办法。然而，社区在过去是如此友善，所以我想我会看看是否有人能给我指出正确的方向

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

因此，我的多步骤表单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>

然而，这不起作用，我不知道下一步该怎么做

---

提前感谢您的帮助

我不知道您的系统是如何替换

标记的，但我想会有一些典型的表单字段。所以您需要编写一些通用的验证函数，它将验证步骤中的所有字段，并允许用户在验证通过后继续下一步

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

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
}

$（“#下一步”）。单击（函数（）{
//移动前验证
如果（ValidateSP（当前页））{
警告（“请在进入下一步之前填写所有字段！”）；
返回false；
}
如果（当前页面<最大页面）{
var nextPage=currentPage+1；
}否则{
return；//如果已在最大页面
}
//…代码的其余部分
}

希望这对你有帮助

---

更新： 以下是页面表单的工作示例：

---

我在每个循环中都有一个错误。

据我所知，在您提交代码后，有什么东西用输入字段替换了

？在这个替换发生后，您是否有某种事件？是的，从系统调用

，并根据字段模板进行填充。因此，我们在系统中为设计了以下字段模板ode>F_3_FIRSTNAME：

{{{{field}}

然后使用系统中定义的设置进行填充-这包括验证失败的相关文本-这可能是一些JS冲突的原因？Hi@zur4ik感谢您的响应！所以我已经测试了这个，不幸的是它没有工作，我的假设是这与系统本身的代码冲突f、

从系统调用的不仅仅是字段信息，还有字段格式。在这一过程中，每个字段都会使用类

required来验证信息。

我在这里运行了一个测试示例：（）它不显示错误字段，即使字段已填充，也会阻止向前移动。我认为这是因为其他步骤返回未填充？

var stepWrapper=$（'fieldset#step'+step）；

这必须只隔离当前页面进行验证。我将根据您的实例重新检查代码并给您回信。谢谢您，我非常感谢您的帮助！：）我在中断每个

循环时出错。此外，我还添加了一个实时工作示例。你可以查一下。您只需要处理途中的错误，并展开选择器以获得更多输入类型字段，如单选按钮或复选框。
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
}