Javascript Dojo在页面上显示多个工具提示_Javascript_Tooltip_Dojo_Dijit.form

Javascript Dojo在页面上显示多个工具提示

javascript dojo

Javascript Dojo在页面上显示多个工具提示,javascript,tooltip,dojo,dijit.form,Javascript,Tooltip,Dojo,Dijit.form,我有一个Dojo表单，我想将错误返回到表单中，并在工具提示中显示它们，因为我不想在表单布局中添加额外的元素。在研究中，我看到Dojo不允许这种开箱即用的实现，因为工具提示将只显示在焦点项目中。在我的例子中，我希望为多个项目显示工具提示，例如所有空字段我在一个博客上看到一个家伙做了一件事，但我不确定他是否实现了这样的目标。我想为多个项目显示多个工具提示。以下是我迄今为止所做工作的一个例子。工具提示仅显示最后一项 Dojo表单 <body class="claro"> <

我有一个Dojo表单，我想将错误返回到表单中，并在工具提示中显示它们，因为我不想在表单布局中添加额外的元素。在研究中，我看到Dojo不允许这种开箱即用的实现，因为工具提示将只显示在焦点项目中。在我的例子中，我希望为多个项目显示工具提示，例如所有空字段

我在一个博客上看到一个家伙做了一件事，但我不确定他是否实现了这样的目标。我想为多个项目显示多个工具提示。以下是我迄今为止所做工作的一个例子。工具提示仅显示最后一项

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>

但是，从用户体验的角度来看，不建议显示所有工具提示。尽管可以突出显示所有无效字段。工具提示设计为仅当我们关注它时才显示。在本例中，通过添加“dijit.showTooltip”，将焦点移动到lastname字段。我更新了你的代码。请参阅-

“connectChildren”是在验证之前将所有字段连接到表单。（请注意，某些字段可能在以后以编程方式添加）。（注意：我在验证文本框中添加了“missingMessage”属性，以防遗漏。因为“无效消息”和“missingMessage”是不同的）

如果没有填写任何字段，默认情况下，表单将把焦点放在第一个字段上。因此，最初，即使未聚焦，第一个字段也会显示消息。但是，如果第一个字段已填充，而没有其他字段被聚焦，则仅当对相应字段进行聚焦时，才会显示missingMessage。同样的情况也适用于无效的输入和消息

表格的部分验证：如果表单中只有少数字段需要验证，那么我们可以手动进行验证。 -检查此完整示例（已更新）

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

这是一个不错的答案，我喜欢它的工作方式“validate”是表单上的一个函数，它对于通过单个调用验证包含在表单中的所有字段都很有用。TabContainer没有验证函数。此外，在该特定表单上调用“validate”不会验证任何其他表单：）另外一个好处是，您的表单可能会依次包含一个TabContainer和每个容器中的太多字段。我们仍然可以使用相同的-form.validate（）；（不考虑内容窗格）您可以创建多个表单以便于编码，或者我们可以逐个选项卡手动执行。检查更新答案。-遵循同样的方法。获取所有字段的列表，并通过迭代列表手动验证它们。“GetDescents”是许多小部件中可用的一种方法，用于从特定DOM节点获取整个子树。您的向导窗体将具有类似的名称。如果没有，写你自己的。

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

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