如何轻松禁用 dijit/layout/TabContainer 中的不可见字段？答案

【问题标题】：How to easily disable invisible fields in a dijit/layout/TabContainer?如何轻松禁用 dijit/layout/TabContainer 中的不可见字段？
【发布时间】：2014-04-09 18:56:23
【问题描述】：

我目前正在使用 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"> 中那样） - 没有提交/验证。事实并非如此。

所以，我问你是否有一种简单的方法可以禁用其他选项卡中的所有字段。或者，也许您知道我应该如何仅验证可见字段。

谢谢。

【问题讨论】：

标签： javascript dojo dijit.layout

【解决方案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
 }
});

【讨论】：