asp.net剃鬚刀火驗證瀏覽頁面輸入控件在kendo ui上傳選擇文件按鈕

Question

我有一個與Kendo UI控件的asp.net mvc應用程序。我有一個上傳文件剃鬚刀視圖，頁面上有很少的輸入控件。

我的要求是對頁面中所有其他輸入控件的文件選擇按鈕進行頁面驗證。 （至少需要驗證必須被解僱）

我可以有一個提交按鈕並啓動驗證。但我需要在Kendo 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(); 
      } 
     }); 
});