Closing tooltip validation error when dropdown is closed

5 posts, 1 answers
  1. Larry
    Larry avatar
    24 posts
    Member since:
    Apr 2017

    Posted 22 Jul Link to this post

    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

     

  2. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 25 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Larry
    Larry avatar
    24 posts
    Member since:
    Apr 2017

    Posted 25 Jul in reply to Dimitar Link to this post

    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

  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 26 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Larry
    Larry avatar
    24 posts
    Member since:
    Apr 2017

    Posted 26 Jul in reply to Dimitar Link to this post

    Thanks much Dimitar!

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

    Regards,

    Larry

Back to Top