required validation on condition

3 posts, 1 answers
  1. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 28 Nov Link to this post

    HI,

    I need to validate Model field as required only if models datasource has items. If var models = [ ] - I don't need to validate.

    Thank you for your help.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>how to make required field on condition</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <div id="grid"></div>
    <script>
        // array of all brands
        var brands = [
            { brandId: 1, name: "Ford" },
            { brandId: 2, name: "BMW" }
        ];

        // array of all models
        var models = [
            { modelId: 1, name: "Explorer", brandId: 1},
            { modelId: 2, name: "Focus", brandId: 1},
            { modelId: 3, name: "X3", brandId: 2},
            { modelId: 4, name: "X5", brandId: 2}
        ];

        $("#grid").kendoGrid({
            dataSource: {
                data: [
                    { id: 1, brandId: 1, modelId: "" } // initial data item (Ford, Focus)
                ],
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { editable: false } // the id field is not editable
                        }
                    }
                }
            },
            editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
            columns: [
            { field: "id" },
            {
                // the brandId column
                title: "Brand",
                field: "brandId", // bound to the brandId field
                template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field
                editor: function(container) { // use a dropdownlist as an editor
                    // create an input element with id and name set as the bound field (brandId)
                    var input = $('<input id="brandId" required name="brandId">');
                    // append to the editor container
                    input.appendTo(container);

                    // initialize a dropdownlist
                    input.kendoDropDownList({
                        dataTextField: "name",
                       optionLabel: "Select...",
                        dataValueField: "brandId",
                        dataSource: brands // bind it to the brands array
                    }).appendTo(container);
                }
            },
            {
                //The modelId column
                title: "Model",
                field: "modelId",  // bound to the modelId field
                template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
                editor: function(container) { // use a dropdownlist as an editor
                    var input = $('<input id="modelId" name="modelId">');
                    input.appendTo(container);
                    input.kendoDropDownList({
                        dataTextField: "name",
                        dataValueField: "modelId",
                       optionLabel: "Select...",
                        cascadeFrom: "brandId", // cascade from the brands dropdownlist
                        dataSource: models // bind it to the models array
                    }).appendTo(container);
                }
            },
            { command: "edit" }
            ]
        });

        function brandName(brandId) {
            for (var i = 0; i < brands.length; i++) {
                if (brands[i].brandId == brandId) {
                    return brands[i].name;
                }
            }
        }

        function modelName(modelId) {
           if (modelId == null || modelId == "") {
                    return "";
                }
            for (var i = 0; i < models.length; i++) {
                if (models[i].modelId == modelId) {
                    return models[i].name;
                }
            }
        }
    </script>
    </body>
    </html>

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1389 posts

    Posted 30 Nov Link to this post

    Hello, Vadim,

    Thank you for the runnable example.

    In this scenario, I can suggest in the editor function to check if the model's array is empty and based on that to set the input as required or not.

    http://dojo.telerik.com/ilikO

    Also, as the tooltip can be hidden in some scenarios, please check the following article demonstrating how it can be made visible:

    https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-tooltip

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 30 Nov in reply to Stefan Link to this post

    Hi Stefan,
    Thank you for your solution. I placed a validation message as you sugested:
    var message = $('<span class="k-invalid-msg" data-for="modelId"></span>');

    message.appendTo(container);
    and it works perfectly!
    Thanks again
    Vadim

Back to Top