2011-09-26 38 views
0

嗨我有一個問題與表單驗證與dojo的表單dijit其中 我有兩個或多個選項卡的形式。如果我有一個字段在選項卡 2上無效,但我在驗證時(通過按提交/確定按鈕)將其定位在tab1上,則驗證方法會執行,但無法找到錯誤的dijit(切換到正確的選項卡)並專注於此。 invalidMessage出現,但位於窗口的左上角,而不是它應該在的位置的 。 有沒有辦法實現這個或解決方法適用於dojo 1.6?您可以提供的任何信息將不勝感激,謝謝。Dojo表單驗證橫跨標籤

回答

1

如果你正在使用dijit.form.Form(它看起來像你),我認爲最簡單的方法是覆蓋窗體的validate函數。看看在dijit.form.Form原來的驗證函數的定義(在_FormMixin.js):

validate: function(){ 
      // summary: 
      //  returns if the form is valid - same as isValid - but 
      //  provides a few additional (ui-specific) features. 
      //  1 - it will highlight any sub-widgets that are not 
      //   valid 
      //  2 - it will call focus() on the first invalid 
      //   sub-widget 
      var didFocus = false; 
      return dojo.every(dojo.map(this.getDescendants(), function(widget){ 
       // Need to set this so that "required" widgets get their 
       // state set. 
       widget._hasBeenBlurred = true; 
       var valid = widget.disabled || !widget.validate || widget.validate(); 
       if(!valid && !didFocus){ 
        // Set focus of the first non-valid widget 
        dojo.window.scrollIntoView(widget.containerNode || widget.domNode); 
        widget.focus(); 
        didFocus = true; 
       } 
       return valid; 
      }), function(item){ return item; }); 
     }, 

你可以圍繞if(!valid && !didFocus){條件改爲查找驗證失敗的部件是哪個選項卡,並切換到它。

0

這適用於我。它只是檢查父母是否是一個標籤(有點醜陋,所以建議是受歡迎的),如果是,獲取其父母並激活標籤。 它擴展了scrollIntoView,因爲這對我來說看起來是正確的功能。這意味着如果您在某個選項卡上將小部件滾動到視圖中,該選項卡會自動激活。

只要確保此代碼在某處運行。

define([ 
"dojo/_base/window", 
"dojo/aspect", 
"dojo/dom", 
"dojo/dom-class", 
"dojo/window", 
"dijit/registry" 
], function (baseWindow, aspect, dom, domClass, win, registry) { 
    //extend scrollintoview to make sure, if the element resides on a tab, the tab is activated first. 
    aspect.around(win, "scrollIntoView", function (originalScrollIntoView) { 
     return function (node, pos) { 
      node = dom.byId(node); 
      var doc = node.ownerDocument || baseWindow.doc, 
       body = baseWindow.body(doc), 
       html = doc.documentElement || body.parentNode; 
      if (node == body || node == html) { return; } 

      var widget = registry.byNode(node.domNode || node); 
      if (typeof widget != "undefined" && widget != null) { 
       if (typeof widget.getParent != "undefined") { 
        var par = widget.getParent(); 
        if (domClass.contains(node.domNode || node, 'dijitTabPane')) { 
         if (typeof par.selectChild != "undefined") { 
          try { 
           par.selectChild(widget); 
          } catch (e) { } 
          return; 
         } 
        } 
        if (domClass.contains(par.domNode, 'dijitTabPane')) { 
         this.scrollIntoView(par.domNode); 
        } 
       } 
      } 
     } 
     return originalScrollIntoView(node, pos); 
    }); 
});