如何輕松禁用 dijit/layout/TabContainer 中的不可見字段？

Question

我目前正在使用 TabContainer 來顯示用於數據搜索的多組字段。 喜歡：

    <form id="my_form" data-dojo-type="dijit/form/Form">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="doLayout: false">
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Search by BU'">
                <p class="fieldrow">
                    <label for="codeBU_BU" class="longlabel">Business Unit</label>
                    <input id="codeBU_BU" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="required: true, maxHeight: 420">
                    <label for="userCore" class="longlabel" >User Code</label>
                    <input id="userCore" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="required: false, maxHeight: 420">
                </p>
                <p class="fieldrow">
                    <label for="from_BU" class="longlabel">From</label>
                    <input id="from_BU" data-dojo-type="dijit/form/DateTextBox">
                    <label for="to_BU" class="longlabel">To</label>
                    <input id="to_BU" data-dojo-type="dijit/form/DateTextBox">
                </p>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Search by CN'">
                <p class="fieldrow">
                    <label for="caseNumber" class="longlabel">Case Number</label>
                    <input id="caseNumber" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true">
                </p>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Search by User'">
                <p class="fieldrow">
                    <label for="userNumber" class="longlabel">User Number</label>
                    <input id="userNumber" maxlength="20" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required: true">
                    <label for="userName" class="longlabel">User Name</label>
                    <input id="userName" maxlength="20" data-dojo-type="dijit/form/TextBox">
                </p>
                <p class="fieldrow">
                    <label for="from_US" class="longlabel">From</label>
                    <input id="from_US" data-dojo-type="dijit/form/DateTextBox">
                    <label for="to_US" class="longlabel">To</label>
                    <input id="to_US" data-dojo-type="dijit/form/DateTextBox">
                </p>
                <p class="fieldrow">
                    <label for="codeBU_US" class="longlabel">Business Unit</label>
                    <input id="codeBU_US" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="required: false, maxHeight: 420">
                </p>
            </div>
        </div>
        <button id="my_reset" type="reset" data-dojo-type="dijit/form/Button">New Search</button>
        <button id="my_search" type="submit" data-dojo-type="dijit/form/Button">Search</button>
    </form>

問題是當我調用form.validate() ，它不會驗證，因為未選擇的選項卡中有不正確的（空）字段。 我認為（正如我之前在 ExtJS 中遇到的那樣）不可見的字段 - 即圖形隱藏（不像<input type="hidden"> ） - 沒有提交/驗證。 不是這種情況。

所以，我問您是否有一種簡單的方法可以禁用其他選項卡中的所有字段。 或者您可能知道我應該如何只驗證可見字段。

謝謝你。

Answer 1

所有選項卡都包含在表單中。 因此， form.validate() 將驗證所有字段（不考慮選項卡）。 如果必須有選擇地進行驗證，我們可以手動進行。

var fields = dijit.byId('contentPanetTabID').getDescendants();
fields.forEach(function(fld){
 var t = fld.validate && !fld.validate(); //bcos not all fields have validate method
 if(t){ //if invalid
   //display message or do something
 }
});