Validating combobox for a set of values

[Raja]

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.

[Raja]

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.

[Raja]

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."
      }

[Rosen]

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

 

 

[Raja]

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.

[Alexander Valchev]

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