前端之家

  1. 首页
  2. 问答

在以多阶段形式进行下一步之前，如何验证填充的场产量？

• 问答

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

我们利用外部软件来管理我们的数据库并托管我们的数据捕获表格。这种解决方案将我们限制为在构建表单时只能调用字段收益。

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

您可以想象，这是垃圾用户体验，因此我们丢失了很多表格填写内容。

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

当前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');

但是，这不起作用，我不知道下一步该怎么做。

在此先感谢您的帮助！

lgl26 回答：在以多阶段形式进行下一步之前，如何验证填充的场产量？

我不知道您的系统如何替换<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 在每个循环中我都有一个错误。

formshtmljavascriptjqueryvalidation
本文链接：https://www.f2er.com/3095469.html

大家都在问