Jquery validate hides kendo-ui controls -
i have form uses kendo-ui numerictextbox
@html.labelfor(p => p.cost) @html.textboxfor(p => p.cost, new { @autocomplete = "off" })
i bind it, then, make work jquery validate plugin, set 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 try submit form , cost
input invalid, adds errorclass (on .k-widget
wrapper).
the problem that, if press submit button again, kendo-ui
element disappears (with style="display: none;"
).
i don't know triggering this. i've seen if change errorclass else other input-validation-error
, kendo-ui
widget remains visible.
this issue happens kendo-ui
controls, not standard html inputs.
i doing wrong?
i'm betting numeric texbox control double-div-wrapped datepicker control is. here highlight()
, unhighlight()
functions use in validator
configuration determine element apply 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) { // kendo datepicker double-wrapped, requires return parent of 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'); } }
Comments
Post a Comment