Question

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

我遇到了一个博客，其中一个人做了hack，但我不确定他的实施情况。我想为多个项目显示多个工具提示。这也是我迄今所做的fiddle。工具提示仅显示最后一项。

道场表格

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


     });

 });

Answer 1

从用户体验的角度来看，不建议显示所有工具提示。虽然可以突出显示所有无效字段。工具提示仅在我们专注于它时才显示。在您的情况下，通过添加“dijit.showTooltip”将焦点移动到lastname字段。我更新了你的代码。请参阅 - http://jsfiddle.net/ZtzTE/26/

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

“connectChildren”是在验证之前连接所有字段。（请注意，某些字段可能稍后以编程方式添加）。（注意：我在验证文本框中添加了“missingMessage”属性，以防错过它们。因为“Invalid message”和“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");
}

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

1 个答案: