Validator does not work out of box for select elements with "multiple" attribute

[Jay]

Kendo Validator does not process the required rule as expected for select elements that have the "multiple" attribute. 

E.g. consider the following example code:

<div id="myform">      

    <select name="color" required multiple>

        <option value="">Select...</option>

        <option value="red">Red</option>

        <option value="orange">Orange</option>

        <option value="yellow">Yellow</option>

        <option value="green">Green</option>

    </select>

    <button id="save" type="button">Save</button>

</div> 

 

<script>

$(document).ready(function(){

    var validatable = $("#myform").kendoValidator().data("kendoValidator");

    $("#save").click(function() {

        if (validatable.validate()) {

            alert('Valid');

        } else {

            alert('Not valid');

        }

    });

});

</script>  

Action:

• No options are selected (or only "Select..." is selected)
• Click "Save"

Expected result:

•  validatable.validate() returns false and "Not valid" shows in the alert box. 

Actual result

• validatable.validate() returns trueand "Valid" shows in the alert box.  

If you remove the "multiple" attribute from the example code, validatable.validate() returns false as expected when "Select..." is selected.

[EDIT]
Apologies. I did not include all information requested in the sticky topic, nor did I really ask a question.

The above is true on the following set-up:

Kendo UI version: v2012.3.106 
OS: Windows 7 
Browsers: Chrome 18.0.1025.11, Internet Explorer 8.0.7601.17514
jQuery version: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

And I suppose my question would be: Has anyone else here run into this issue and found a robust solution? I am currently investigating some hackish workarounds using the custom rule configuration.

TIA

[Jay]

For those watching from home, here is a hacky workaround to the issue listed above. Only cursorily tested, YMMV, caveat hax0r, etc.

<div id="myform">  

    <p>

    <select name="color" multiple required >

        <option value="">Select</option>

        <option value="red">Red</option>

        <option value="orange">Orange</option>

        <option value="yellow">Yellow</option>

        <option value="green">Green</option>

    </select>

    </p>

    <button id="save" type="button">Save</button>

</div> 

 

<script>

$(document).ready(function(){

    var validationRules =  {

         multiselectrequired: function(input) {

                var ret = true;

                if( input.is("select") && input.attr("multiple") != undefined && input.attr("required") != undefined ) {

                    ret = input.val() != null;

                }

                return ret;

            }

    }  

     

    var validationMessages =  {

        multiselectrequired: "Please select at least one item."

    }

 

    var validatable = $("#myform").kendoValidator({rules:validationRules, messages:validationMessages}).data("kendoValidator");

    $("#save").click(function() {              

        if (validatable.validate()) {

            alert('Valid');

        } else {

            alert('Not valid');

        }

    });

});

</script>  

I am still deciding whether or not I think the current Validator behavior is a bug. I believe an unsophisticated would naturally expect Validator to catch "multiple-select" elements that no options selected automatically. But I have a sneaking suspicion that there are use cases where having that behavior out of the box could create problems. On the third hand, my hunches are not very reliable in these matters.

[Rosen]

Hi Jay,

Indeed, you are correct that in the current version of our Validator, the multi select elements marked as required are not validated correctly when there is not options selected. However, we managed to address this issue and the fix will be included in the next official release of the library. Meanwhile I have updated your telerik points.

Regards,
Rosen
the Telerik team