在剑道ui上传选择文件按钮上启动asp.net剃刀视图页面输入控件的验证

Question

我有一个带有Kendo UI控件的asp.net mvc应用程序。我有一个上传文件剃刀视图，页面上几乎没有输入控件。

我的要求是对页面中所有其他输入控件的文件选择按钮启动页面验证。（至少必须启动所需的验证）

我可以有一个提交按钮并启动验证。但我需要在剑道UI上传选择按钮上有这个功能。即，用户只有在为所有输入控件填充有效值后才能选择/浏览要上传的文件。

我在代码中做了很多搜索和试错方法，但都无济于事。我是剑道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>

编辑：-我可以为上传控件写一个选择事件，如下所示：

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

但在这种情况下，用户必须选择一个文件来获取验证错误。

我们的要求是，当用户点击选择按钮时，验证错误应该弹出。如果没有错误，则只打开文件选择窗口。

感谢

Answer 1

您可以在初始化期间将点击函数绑定到上传，并在调用默认行为（浏览对话框）窗口之前检查您的自定义值。

$(document).ready(function () {
        $("#yourUploadName").click(function (e) {
            var valid=myValidationFunction();
            if (!valid) {
                alert("Bad");
                //This will cancel the showing of the search dialog 
                e.preventDefault();
            }
       });
 });