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

3 posts, 0 answers
  1. Jay
    Jay avatar
    4 posts
    Member since:
    Jan 2012

    Posted 14 Feb 2012 Link to this post

    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

  2. Jay
    Jay avatar
    4 posts
    Member since:
    Jan 2012

    Posted 14 Feb 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 15 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top