如何在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'); 
     } 
    } 
});