Dojo displaying multiple tooltip on page

问题

I have a Dojo form and i would like to return errors to the form and display them in tool tips since i do not want to add extra elements to my form layout. On researching i saw Dojo doesn't allow for such implementation out of the box since the tool tip will only be displayed in items in focus. In my case i would like tool tips to be displayed for multiple items e.g for all null fields.

I came across a blog where a guy did a hack however i am not sure about his implementation of such. I would like to display multiple tool tips for multiple items. Here is also a fiddle of what i have done thus far. The tooltip only shows for the last item.

Dojo Form

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


     });

 });

回答1:

Showing all the tool tips is not advisable though, from the perspective of user experience. Although all invalid fields can be highlighted. Tooltip are designed to display only when we focus on it. In you case, you move the focus to the lastname field, by adding "dijit.showTooltip". I updated your code. Please refer - http://jsfiddle.net/ZtzTE/26/

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

"connectChildren" is to connect all fields to form before validating. (Note that some fields might have been added programmatically later). (Note: I added "missingMessage" attribute to the validation text boxes, in case you have missed them. Because, "Invalid message" and "missingMessage" are different).

If no fields are filled, the by default form will have focus on first field. So, initially the message will appear for first field even if not focused. But, if first field is filled and no other field is focused, then missingMessage appears only when focus is made to the respective field. Same applies to the invalid input and message too.

Partial Validation of form: If only few fields are to be validated in a form, then we can do it manually. http://jsfiddle.net/ZtzTE/29/ - Check this complete example(updated)

//cp1 and cp2 are the two content panes of tab container

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

来源：https://stackoverflow.com/questions/23033196/dojo-displaying-multiple-tooltip-on-page

标签

javascript

tooltip

dojo

dijit.form