0

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

我的要求是为页面中的所有其他输入控件触发文件选择按钮上的页面验证。（至少必需的验证必须被解雇）

我可以有一个提交按钮并触发验证。但我需要在 Kendo UI 上传选择按钮上具有该功能。即，用户只有在为所有输入控件填写有效值后才能选择/浏览要上传的文件。

我在我的代码中进行了许多搜索和反复试验，但没有任何帮助。我是 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")
 )
)

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

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

谢谢

4

1 回答 1

0

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

$(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();
            }
       });
 });
于 2014-04-15T03:24:05.157 回答