Validating combobox for a set of values

6 posts, 0 answers
  1. Raja
    Raja avatar
    43 posts
    Member since:
    Oct 2013

    Posted 16 Jul 2014 Link to this post

    Hi,

    i am trying to validate input for a combobox and trying to make sure that user entered/selected value from a pre-defined list of values. I am using MVVM. I tried this in two ways.

    1. Using onChange event of the combobox
         I am able to validate the input as below.
         

    selectionChanged: function (e) {
            if (e.sender.value() && e.sender.selectedIndex == -1)
            {
               //how to mark the control as invalid??
            }
        }

         Problem is i am not able to mark the control as invalid so that kendo framework displays the error message. I have a required validation on this field already.

    2. Using rules
    $(".entryform").kendoValidator({
            rules: {
                validRoom: function (input) {
                    if(input.is("[name=Room]"))
                    {
                        if (input.val() && input.selectedIndex != -1)
                        {
     
                        }
                    }
                    return true;
                }
            }
        });
    Here there is no selectedIndex.

    Please help.

  2. Raja
    Raja avatar
    43 posts
    Member since:
    Oct 2013

    Posted 17 Jul 2014 Link to this post

    I am able to do this with custom rules (Point 2 above) with change in the code. But there is a little hiccup. Here is the code.

    $(".entryform").kendoValidator({
            rules: {
                invalidRoom: function (input) {
                    if(input.is("[name=Room]"))
                    {
                        if (input.val()!= "" && $("#Room").data("kendoComboBox").selectedIndex == -1)
                        {
                            return false;
                        }
                        return true;
                    }
                }
            },
            messages: {
                invalidRoom: "Room number is invalid."         
          }

    Is this the right way? Actual hiccup now is the validation message appears at two places. See the attached image.
  3. Kendo UI is VS 2017 Ready
  4. Raja
    Raja avatar
    43 posts
    Member since:
    Oct 2013

    Posted 17 Jul 2014 Link to this post

    Few minutes after my previous post I found out that it is an issue with the code. It is a problem with the placement of return statement. Below code worked fine.

    $(".entryform").kendoValidator({
            rules: {
                invalidRoom: function (input) {
                    if(input.is("[name=Room]"))
                    {
                        if (input.val()!= "" && $("#Room").data("kendoComboBox").selectedIndex == -1)
                        {
                            return false;
                        }
                    }
                    return true;
                }
            },
            messages: {
                invalidRoom: "Room number is invalid."        
          }
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 Jul 2014 Link to this post

    Hello Raja,

    Indeed, the "double" messages is due to the fact that not all of execution path of custom rule function returns value. As you may know in JavaScript all functions return false if they do not return something explicitly. Thus, in you case the function returns false for all of the inputs which does not have name Room (there is no return in "the else path" of this if statement), marking them as invalid and showing the invalid message for this rule.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Raja
    Raja avatar
    43 posts
    Member since:
    Oct 2013

    Posted 07 Aug 2014 in reply to Rosen Link to this post

    Some how this broke again. Code is not changed. I have two validations on this combobox. Required validation and a custom validation as mentioned above to validate if user has selected a value from the list.

    I can see the validation hits the function and returns false. I can also see the message if I go to html markup in debugger tools but the tool tip is not displayed. It always has display:none. Not sure whats gone wrong.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Aug 2014 Link to this post

    Hi Raja,

    Is it possible for you to set-up a small runnable Kendo UI Dojo test page which isolates the issue? In this way I will be able to examine your exact scenario in details and assist you further.
    Thank you in advance for the cooperation.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready