validate cascade comboboxes

2 posts, 0 answers
  1. Kyriakos
    Kyriakos avatar
    15 posts
    Member since:
    Jun 2012

    Posted 28 Feb 2013 Link to this post

    hi ,my question involves the validation of a cascade combobox.

    i have a form with 3 cascade comboboxes as shown below and the second combobox is cascading from the selection of the 1st and in the same manner teh third is cascading of the second ,
    The second and the third combobox is disabled till u make a selection on the first.
    The problem is there are times that the second or the third data array may not match anything from the selection of the 1st combobox so they stay disabled , my issue is that the validation needs them to be completed even though they are disabled .
    So my question is regardless of how many of the comboboxes are filled up is there any way to make the validation procceed?
    because if i have no valid match for the second or the third combobox it doesnt proceed.
    i want in the case that a selected option of the 1st combobox is filled up and theres nothing for the combobox no2 and no3. to finish the validation there.

    <uL>
    <li>
                                                        <label for="Text1">Χώρα</label>
                                                        <input id="Text1" class="comboInput" role="combobox" style="width:250px" required validationMessage="παρακαλώ συμπληρώστε τη {0}"/>
                                                    </li>
                                                    <li>
                                                        <label for="Text2" role="status">Νομός</label>
                                                        <input id="Text2" class="comboInput" disabled="disabled" style="width:250px" role="combobox" required validationMessage="παρακαλώ συμπληρώστε τη {0}"/>
                                                    </li>
                                                    <li>
                                                        <label for="Text3" role="status">Πόλη / Περιοχή</label>
                                                        <input id="Text3" class="comboInput" disabled="disabled"style="width:250px"  role="combobox" required validationMessage="παρακαλώ συμπληρώστε τη {0}"/>
                                                    </li>
    </li>

    <script>
    $(document).ready(function () {
                                                        $("#Text1").kendoComboBox({
                                                            placeholder: "Επιλέξτε χώρα...",
                                                            dataTextField: "CategoryName",
                                                            dataValueField: "value",
                                                            dataSource: [
                                                                { CategoryName: "Πράσινο", value: "1" },
                                                                { CategoryName: "Μώβ", value: "2" },
                                                                { CategoryName: "Κανελί με βούλες", value: "3" },
                                                                { CategoryName: "Κίτρινο", value: "4" }
                                                            ],
                                                            serverFiltering: false,
                                                        });

                                                        var products = $("#Text2").kendoComboBox({
                                                            autoBind: false,
                                                            cascadeFrom: "Text1",
                                                            placeholder: "Επιλέξτε Νομό...",
                                                            dataTextField: "ProductName",
                                                            dataValueField: "value",
                                                            dataSource: [
                                                                { ProductName: "Μπλέ", value: "1" },
                                                                { ProductName: "Πράσινο", value: "1" },
                                                                { ProductName: "Φούξια", value: "1" },
                                                                { ProductName: "Κόκκινο της φωτιάς", value: "4" }
                                                            ],
                                                            serverFiltering: false,
                                                        }).data("kendoComboBox");

                                                        var orders = $("#Text3").kendoComboBox({
                                                            autoBind: false,
                                                            cascadeFrom: "Text2",
                                                            placeholder: "Επιλέξτε Πόλη/περιοχή...",
                                                            dataTextField: "Painting",
                                                            dataValueField: "value",
                                                            dataSource: [
                                                                { Painting: "Χωρίς", value: "1" },
                                                                { Painting: "Ροζ φούσκες", value: "1" },
                                                                { Painting: "Αστέρια", value: "1" },
                                                                { Painting: "Cartoon", value: "4" }
                                                            ],
                                                            serverFiltering: false,
                                                        }).data("kendoComboBox");
                                                 
    });
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 04 Mar 2013 Link to this post

    Hello Kyriakos,

    By default the required fields must have a value, else the validator will mark them as invalid. For your particular case you can try one of the following approaches:
    • instead of required validation use a custom validation rule. In that case you would be able to check whether the widget is still disabled and if it is - to mark it as valid. You can read more about custom validation rules here.
    • remove the required validation attribute from the inputs via jQuery (removeAttr). In this way the required validation will not trigger at all.
    • override the standard required validation (rules object).

    I hope this information will help.

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