7

I have a form which uses a kendo-ui numericTextBox

@Html.LabelFor(p => p.Cost)
@Html.TextBoxFor(p => p.Cost, new { @autocomplete = "off" })

I bind it, then, to make it work with jquery validate plugin, i set the following settings:

$("#Cost").kendoNumericTextBox({
    format: "c",
    min: 0,
    decimals: 2
});

$.validator.setDefaults({
    ignore: [],
    highlight: function (element, errorClass) {
        element = $(element);
        if (element.hasClass("k-input")) {
            element.closest(".k-widget").addClass(errorClass);

        } else {
            element.addClass(errorClass);
        }
    },
    unhighlight: function (element, errorClass) {
        element = $(element);
        if (element.hasClass("k-input")) {
            element.closest(".k-widget").removeClass(errorClass);
        } else {
            element.removeClass(errorClass);
        }
    }
});

When i try to submit the form and Cost input is invalid, it adds the errorClass properly (on .k-widget wrapper).

The problem is that, if i press the submit button again, then the kendo-ui element simply disappears (with style="display: none;").

I don't know what is triggering this. I've seen that if i change the errorClass to something else other than input-validation-error, then the kendo-ui widget remains visible.

This issue happens only with kendo-ui controls, not also with standard html inputs.

I am doing something wrong?

Catalin
  • 11,503
  • 19
  • 74
  • 147
  • You have not shown enough code to reproduce anything. Where is the rendered HTML for the form? Where is `.validate()` declared? – Sparky May 19 '13 at 14:38
  • @RaraituL Did you ever come up with a solution for this? I'm having the same issue. – aw04 Feb 20 '14 at 15:14

2 Answers2

7

I'm betting that the numeric texbox control is double-div-wrapped just like the datepicker control is. Here are the highlight() and unhighlight() functions I use in my validator configuration to determine what element to apply the error class to:

...
highlight: function (element, errorClass, validClass) {
  var e = $(element),
      parent = _getParent(e);

    _addClass(e, parent);
  },
unhighlight: function (element, errorClass, validClass) {
  var e = $(element),
      parent = _getParent(e);

  _removeClass(e, parent);
}
...

function _getParent(element) {
  // a Kendo DatePicker is double-wrapped, so that requires us to return the parent of the parent
  return (element.parent().hasClass('k-picker-wrap')) ? element.parent().parent() : element.parent();
}

function _addClass (element, parent) {
  if (parent.hasClass('k-widget')) {
    parent.addClass('error');
  } else {
    element.addClass('error');
  }
}

function _removeClass(element, parent) {
  if (parent.hasClass('k-widget')) {
    parent.removeClass('error');
  } else {
    element.removeClass('error');
  }
}
Brett
  • 4,268
  • 1
  • 13
  • 28
  • I've made a solution very similar to this one, except that instead of searching for `.k-picker-wrap` css class, i am looking for `.k-widget` class, which all the `kendo ui` controls have it – Catalin Feb 21 '14 at 08:17
  • @RaraituL Hmmm, this is what I did as well to find the element but whichever one I choose it still sets "display:none" on second submit. – aw04 Feb 21 '14 at 13:56
  • 1
    @aw04: Ahh, that's right. If i remember correctly, it was a piece of code in the `jquery.validate.unobtrusive` plugin which was hiding a control. I think this function was responsible of hiding the controls `function onError(error, inputElement)`. Unfortunately i don't have the code anymore to know exactly – Catalin Feb 21 '14 at 14:01
  • @RaraituL Cool, that's a start I will look into it. Thank you for taking the time to come back and update this post. If I find it I'll add an answer for future reference. – aw04 Feb 21 '14 at 15:11
3

To fix the problem that the element disappears on the second submit, I did this:

$("form").submit(function (event) {
  $(".k-widget").removeClass("input-validation-error");
}
lentoPastel
  • 31
  • 4