亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在進入多階段表單的下一步之前,如何驗證字段收益已填充?

在進入多階段表單的下一步之前,如何驗證字段收益已填充?

守候你守候我 2022-01-01 20:45:30
抱歉,我確定這是一個簡單的解決方案。但是,社區過去一直很友善,所以我想看看是否有人可以為我指明正確的方向。我們利用外部軟件來管理我們的數據庫和托管我們的數據捕獲表格。此解決方案限制我們在構建表單時調用字段收益。所以我的多步表單的 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></form>系統具有內置檢查,使該字段產生“必需”但是,這些似乎只對“提交按鈕”進行操作,因此如果用戶跳到最后,錯過了第 1 步中的提交,表單不會提交,它也不顯示編碼到字段 yields 中的錯誤消息??梢韵胂?,這是垃圾用戶體驗,因此我們丟失了很多表單完成。我想要實現的是驗證每個步驟中的所有字段在進入下一步之前都已填充的代碼,從而防止用戶進入不起作用的提交按鈕。這允許進度條工作,用于遍歷表單的后退按鈕和顯示/隱藏每個步驟。我想在下面添加類似下面的內容來驗證字段完成。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');但是,這不起作用,我不知道接下來要嘗試什么。提前感謝您的任何幫助!
查看完整描述

1 回答

?
長風秋雁

TA貢獻1757條經驗 獲得超7個贊

我不知道您的系統如何替換<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 我在每個循環中都有一個錯誤。


查看完整回答
反對 回復 2022-01-01
  • 1 回答
  • 0 關注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號