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
 }
});

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

1 个答案: