在進入多階段表單的下一步之前，如何驗證字段產量是否已填充？

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我在每個循環中都有一個錯誤。