Огневая проверка элементов управления вводом страницы просмотра бритвы asp.net на кнопке выбора файла для загрузки пользовательского интерфейса кендо

У меня есть приложение asp.net mvc с элементами управления Kendo UI. У меня есть представление бритвы для загрузки файла с несколькими элементами управления вводом на странице.

Мое требование состоит в том, чтобы запустить проверку страницы на кнопке выбора файла для всех других элементов управления вводом на странице. (по крайней мере, необходимая проверка должна быть уволена)

У меня может быть кнопка отправки и запуск проверки. Но мне нужно, чтобы эта функциональность была на кнопке выбора загрузки пользовательского интерфейса Kendo. т. е. пользователь может выбирать/просматривать файл для загрузки только после заполнения допустимых значений для всех элементов управления вводом.

Я сделал много поисков и методов проб и ошибок в своем коде, но ничего не помогло. Я новичок в элементах управления Kendo UI, поэтому, пожалуйста, помогите

Заранее спасибо,

Я прилагаю пример кода ниже:

@{
    ViewBag.Title = "Kendo Validate";
}

@model KendoInputs_Validation.Models.ViewModel

@using(Html.BeginForm()) 
{
    <div id="tickets">
        <h3>Book Tickets</h3>
        <ul id="innerList">
            <li>
                @Html.LabelFor(m => m.ComboBox)
                @Html.Kendo().ComboBoxFor(m => m.ComboBox)
                @Html.ValidationMessageFor(m => m.ComboBox)
            </li>

            <li>
                @Html.LabelFor(m => m.DropDownList)
                @(Html.Kendo().DropDownListFor(m => m.DropDownList)
                      .OptionLabel("Select item...")
                      .BindTo(new SelectList(new string[] { "Item1", "Item2", "Item3" }))
                )

                @Html.ValidationMessageFor(m => m.DropDownList)
            </li>

            <li>
                @Html.LabelFor(m => m.DatePicker)
                @Html.Kendo().DatePickerFor(m => m.DatePicker)
                @Html.ValidationMessageFor(m => m.DatePicker)
            </li>

            <li>
                @Html.LabelFor(m => m.Number)
                @Html.Kendo().NumericTextBoxFor(m => m.Number)
                @Html.ValidationMessageFor(m => m.Number)
            </li>

            <li  class="accept">
                <button class="k-button" type="submit">Submit</button>
            </li>
            <li>
                @(Html.Kendo().Upload()
                                  .Name("files")
                                  .Messages(msg => msg
                                      .Select("Browse")
                                  ))
            </li>
        </ul>
    </div>
}

<script>
    $(document).ready(function () {
        /* Bind Mutation Events */
        var elements = $("#tickets").find("[data-role=combobox],[data-role=dropdownlist],[data-role=numerictextbox],[data-role^=date], [data-role^=upload]");

        //correct mutation event detection
        var hasMutationEvents = ("MutationEvent" in window),
            MutationObserver = window.WebKitMutationObserver || window.MutationObserver;

        if (MutationObserver) {
            var observer = new MutationObserver(function (mutations) {
                var idx = 0,
                    mutation,
                    length = mutations.length;

                for (; idx < length; idx++) {
                    mutation = mutations[idx];
                    if (mutation.attributeName === "class") {
                        updateCssOnPropertyChange(mutation);
                    }
                }
            }),
            config = { attributes: true, childList: false, characterData: false };

            elements.each(function () {
                observer.observe(this, config);
            });
        } else if (hasMutationEvents) {
            elements.bind("DOMAttrModified", updateCssOnPropertyChange);
        } else {
            elements.each(function () {
                this.attachEvent("onpropertychange", updateCssOnPropertyChange);
            });
        }
    });

    function updateCssOnPropertyChange (e) {
        var element = $(e.target);

        element.siblings("span.k-dropdown-wrap")
               .add(element.parent("span.k-numeric-wrap"))
               .add(element.parent("span.k-picker-wrap"))
               .toggleClass("k-invalid", element.hasClass("input-validation-error"));
    }
</script>

<style type="text/css">
    .k-widget > span.k-invalid,
    input.k-invalid
    {
        background: red;
    }

    #innerList li
    {
        margin: 10px 10px;
    }
</style>

Изменить: - Я могу написать событие Select для элемента управления загрузкой, как показано ниже:

@(Html.Kendo().Upload()
.Name("files")
.Events(events => events
       .Select("onSelect")
 )
)

Но в этом случае пользователь должен выбрать файл для получения ошибок проверки.

Наше требование состоит в том, что когда пользователь нажимает кнопку выбора, должны появляться ошибки проверки. если ошибок нет, то открывается только окно выбора файла.

Спасибо