如何在Kendo UI的NumericTextBox上使用MVC的遠程驗證？

Question

我有點麻煩：我有一個頁面，其特點是一個整數值，應該針對數據庫驗證其是否具有重複性，使用MVC的內置TextBoxFor可以正常工作，但是當我將其更改爲Kendo的NumericTextBox for更好的輸入驗證和全面的用戶友好性，遠程方法永遠不會被調用。

基本上是：

[Remote("ValidateDuplicity", "Edital", AdditionalFields = "Year, Id", ErrorMessage = "Code already used")]   
    public int Code { get; set; } 

如果在視圖中我用下面，一切工作正常：

@Html.TextBoxFor(x => x.Code, new { @class = "k-textbox lt-width-full" }) 
    @Html.ValidationMessageFor(x => x.Code) 

但在接下來的情況下，確認從未觸發：

@Html.Kendo().NumericTextBoxFor(x => x.Code) 
    @Html.ValidationMessageFor(x => x.Code) 

關於我可能會遺漏的任何想法？

編輯：

至於問，呈現的HTML看起來像這樣：

<span class="k-numeric-wrap k-state-default"> 
    <input type="text" class="k-formatted-value k-input" tabindex="0" aria-disabled="false" aria-readonly="false" style="display: inline-block;"> 
    <input data-val="true" data-val-number="The field Numero must be a number." data-val-regex="Número inválido" data-val-regex-pattern="^([0-9]+)$" data-val-remote="Edital já cadastrado" data-val-remote-additionalfields="*.Numero,*.Ano,*.Id" data-val-remote-url="/SAGI/DNIT/Edital/ValidadeDuplicidadeEdital" data-val-required="Campo requerido" id="Numero" name="Numero" type="text" value="457" data-role="numerictextbox" role="spinbutton" class="k-input" aria-valuenow="457" aria-disabled="false" aria-readonly="false" style="display: none;"> 
    <span class="k-select"> 
    <span unselectable="on" class="k-link"> 
     <span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value"> 
     Increase value 
     </span> 
    </span> 
    <span unselectable="on" class="k-link"> 
     <span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value"> 
     Decrease value 
     </span> 
    </span> 
    </span> 
</span> 

編輯2

而使用TextBoxFor生成的HTML的時候看起來是這樣的：

<input class="k-textbox lt-width-full" data-val="true" data-val-number="The field Numero must be a number." data-val-regex="Número inválido" data-val-regex-pattern="^([0-9]+)$" data-val-remote="Edital já cadastrado" data-val-remote-additionalfields="*.Numero,*.Ano,*.Id" data-val-remote-url="/SAGI/DNIT/Edital/ValidadeDuplicidadeEdital" data-val-required="Campo requerido" id="Numero" name="Numero" type="text" value="457"> 

Answer 1

默認情況下，Jquery驗證不適用於隱藏字段。所以，你必須把這段代碼的jQuery驗證JS參考

$.validator.setDefaults({ 
     ignore: "" 
    }); 

http://docs.telerik.com/kendo-ui/aspnet-mvc/validation#using-the-jquery-validation

Answer 2

首先，我們需要定義一個新的遠程規則kendoValidator並使其禁用jQuery的驗證器的remote方法，然後經過async: false，可以使用data-val-remote-url和ASP.NET MVC的其他屬性與KendoUI。

$.validator.methods.remote = function() { /* disabled */ }; 
$("form").kendoValidator({ 
    onfocusout: true, 
    onkeyup: true, 
    rules: { 
     remote: function (input) { 
      var remoteAttr = input.attr("data-val-remote-url"); 
      if (typeof remoteAttr === typeof undefined || remoteAttr === false) { 
       return true; 
      } 

      var isInvalid = true; 
      var data = {}; 
      data[input.attr('name')] = input.val(); 

      $.ajax({ 
       url: remoteAttr, 
       mode: "abort", 
       port: "validate" + input.attr('name'), 
       dataType: "json", 
       type: input.attr("data-val-remote-type"), 
       data: data, 
       async: false, 
       success: function (response) { 
        isInvalid = response; 
       } 
      }); 
      return !isInvalid; 
     } 
    }, 
    messages: { 
     remote: function (input) { 
      return input.data('val-remote'); 
     } 
    } 
});