Jquery validates kendo-ui hidden controls

Question

I have a form that uses kendo-ui numericTextBox

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

I bind it to make it work with the 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 a form and the Cost input is invalid, it correctly adds errorClass (on the .k .k-widget wrapper).

The problem is that if I press the submit button again, the kendo-ui element will just disappear (with style="display: none;" ).

I do not know what causes this. I saw that if I changed errorClass to something other than input-validation-error , then the kendo-ui widget will remain visible.

This problem occurs only with kendo-ui controls, as well as with standard html inputs.

Am I doing something wrong?

Answer 1

I'm sure the texbox numeric control is double-div-wrapped, like the datepicker control. Here are the highlight() and unhighlight() functions that I use in my validator configuration to determine which 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'); } } 

Answer 2

To fix the problem that the element disappears in the second submit, I did the following:

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