Closing tooltip validation error when dropdown is closed

[Larry]

I'm displaying a tooltip required error message using the validator when the dropdown isn't selected.

When the dropdown is selected, can the error message be automatically hidden?

I'm not worried about displaying other messages so when it's selected, I'd like the error to disappear - but not all errors.

Your suggestions appreciated ...

Thanks,

Larry

 

[Dimitar]

Hello Larry,

By default, when you select an item in the DropDownList, the focus remains on the input element. This means that in order to clear the validation error, you have to focus out of the DropDownList widget. To demonstrate this behavior, I have prepared a short screencast. 

Also, the above step can be skipped by attaching a select event handler to the DropDownList and manually hiding the validation tooltip (demonstrated in the following Dojo):

select: function(e) {
  var item = e.item;
  var text = item.text();

  if(text !== "") {
    $(".k-dropdown .k-tooltip-validation").hide();
  }
}

Regards,
Dimitar
Progress Telerik

[Larry]

Thanks for that information Dimitar. That's the behaviour I'm observing as well.  When I click on another element or outside of the dropdown it re-validates and clears - although that's extra work for the user.

Also the proposed solution is great when there is only one error showing however that isn't always the case. It seems to me that hiding by class will hide everything, and tooltips don't have an ID associated with the control. (Although I could perhaps position them in a span as I've seen before) - in this case extra work for me.

In the select event, would it be possible to trigger a blur and force the focus to the next element in the tab order? Would that hide the tooltip automatically? As a general rule I'd like to auto advance the focus when possible so this could help in other ways also.

Thanks much,

Larry

[Dimitar]

Hello Larry,

I have modified the Dojo sample, which now includes two more textboxes besides the DropDownList widget.

You will notice that in the current setup, the change event of the DropDownList is used to trigger the validation manually only for this widget. This will cause the validation tooltip to disappear once you select a valid item from the list and also appear immediately if you select the placeholder ("Select a product").

In addition to the above, I have used jQuery to focus the next input element:

var index = ddlElement.index("input");
$("input:eq(" + (index +1) + ")").focus();

Regards,
Dimitar
Progress Telerik

[Larry]

Thanks much Dimitar!

Regards,I believe that will help and I will use this approach.

Regards,

Larry