Dojo在頁面上顯示多個工具提示

我有一個Dojo表單，我想將錯誤返回到表單並在工具提示中顯示它們，因爲我不想向表單佈局添加額外的元素。在研究中，我看到Dojo不允許這種實現，因爲工具提示只會顯示在焦點項目中。在我的情況下，我希望顯示多個項目的工具提示，例如所有空字段。Dojo在頁面上顯示多個工具提示

我遇到一個博客，一個人做了一個hack但是我不確定他的執行情況。我想顯示多個項目的多個工具提示。這也是我到目前爲止所做的一個fiddle。工具提示僅顯示最後一個項目。

Dojo表單

<body class="claro"> 
    <input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props=" 
      regExp: '[\\w]+', 
      required: true, 
      invalidMessage: 'First Name Required !'" id="fnameTextBox" title="First Name" placeholder="Your First Name" /> 
    <input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props=" 
      regExp: '[\\w]+', 
      required: true, 
      invalidMessage: 'Last Name Required !'" id="lnameTextBox" title="Last Name" placeholder="Your Last Name" /> 
    <button id="validateFields" data-dojo-type="dijit/form/Button">Validate</button> 
</body>

的Javascript

dojo.require("dijit/form/Button"); 
dojo.require("dijit/form/ValidationTextBox"); 
dojo.require("dijit/Tooltip"); 

dojo.ready(function() { 

    var fName = dijit.byId("fnameTextBox"); 
    var lName = dijit.byId("lnameTextBox"); 

    dojo.connect(dijit.byId("validateFields"), "onClick", function() { 

     dijit.showTooltip(
     fName.get('invalidMessage'), 
     fName.domNode, 
     fName.get('tooltipPosition'), !fName.isLeftToRight()); 

     dijit.showTooltip(
     lName.get('invalidMessage'), 
     lName.domNode, 
     lName.get('tooltipPosition'), !lName.isLeftToRight()); 


    }); 

});

來源

2014-04-12 devdar

顯示所有的工具提示是不可取的，雖然，從用戶體驗的角度。雖然所有無效字段都可以突出顯示。工具提示僅在我們關注它時才顯示。在您的情況下，您可以通過添加「dijit.showTooltip」將焦點移至姓氏字段。我更新了你的代碼。請參閱 - http://jsfiddle.net/ZtzTE/26/

dojo.connect(dijit.byId("validateFields"), "onClick", function() {  
    var myform = dijit.byId('myform'); 
    myform.connectChildren(); 
    myform.validate(); 
});

「connectChildren」是連接各個領域驗證之前形成。（請注意，某些字段可能稍後會以編程方式添加）。（注意：如果您錯過了驗證文本框，我添加了「missingMessage」屬性，因爲「無效消息」和「missingMessage」不同）。

如果沒有填充字段，默認情況下表格的焦點位於第一個字段。因此，即使沒有關注，最初的信息也會出現在第一個字段。但是，如果第一個字段已填充且未聚焦其他字段，則僅當對各個字段進行聚焦時，纔會顯示missingMessage。這同樣適用於無效的輸入和消息。

部分窗體驗證：如果只有幾個字段需要在表單中驗證，那麼我們可以手動完成。 http://jsfiddle.net/ZtzTE/29/ - 檢查這個完整的例子（更新）

// CP1和CP2是標籤的容器的兩個內容窗格

var mytab1 = dijit.byId("cp1"); 
var canNavigate = true; 
var highlight = function(widget){ 
    var v = widget.validate; 
    if(!v) return true; 
    widget._hasBeenBlurred = true; 
    if(!widget.validate()) { 
    canNavigate = false; 
    } 
}; 
dojo.forEach(mytab1.getChildren(), highlight); 
if(canNavigate) { 
    dijit.byId("tc").selectChild("cp2"); 
}

來源

2014-04-12 17:05:33

這不是一個不好回答，我喜歡它的工作原理 – devdar

我能做到的方式如果我的項目位於dojox.layout.TableContainer中，則與使用表單標記一樣。該應用程序採用嚮導形式，僅包含在一個表單標籤中。使用表單標籤會導致嚮導中的其他頁面上的驗證。那麼我可以爲TableContainer做同樣的事嗎？ – devdar

「validate」是表單上的一個函數，這對於通過一次調用來驗證封閉的所有字段非常有用。 TabContainer沒有驗證功能。此外，對該特定表單調用「驗證」將不會驗證任何其他表單:) –

Dojo在頁面上顯示多個工具提示

回答

相關問題