How to use MVC's remote validation on Kendo UI's NumericTextBox?

Question

I'm in a bit of a trouble: I have a page that features one integer value that should be validated against the database for duplicity, which works fine using MVC's built-in TextBoxFor, but when I change it to Kendo's NumericTextBox for a better input validation and overall user friendlyness, the Remote method is never called.

Basically:

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

If in the view I use what follows, everything works ok:

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

But in this next case, the validation is never triggered:

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

Any ideas on what I might be missing?

Edit:

As asked, the rendered Html looks like this:

<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>

Edit 2

Whereas when using TextBoxFor the generated Html looks like this:

<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

First we need to disable the jQuery validator's remote method and then by defining a new remote rule for kendoValidator and making it async: false, it's possible to use the data-val-remote-url and other attributes of ASP.NET MVC with 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');
        }
    }
});

Answer 2

Jquery validation does not work for hidden fields by default. So you have to put this piece of code after the jquery validation JS reference

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

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