Kendo UI validation with zDirective (breeze) and Angular

[Scott]

Hi,

 Breeze zValidate directive offers simple validation in which it display red border around the invalid input and so on. I would like to replace it with Kendo UI validator but only the UI part. I would like to keep the validation rules from the zDirective. So the validation logic will work as follow:

1. A numeric input text box

1.<td><input kendo-numeric-text-box spinners="false" ng-model="r.incomeReturn" data-z-validate /></td>

1. When users enter/change the value, zdirective error handler valErrsChanged(newValue) will run:

01.function valErrsChanged(newValue) {
02.     if (domEl.setCustomValidity) {
03.              domEl.setCustomValidity(newValue || '');
04.        }
05.
06.           var errorHtml = newValue ? valTemplate.replace(/%error%/, newValue) : "";
07.           var isRequired = info.getIsRequired();
08.          var requiredHtml = isRequired ? requiredTemplate : '';
09.          decorator.innerHTML = (isRequired || !!errorHtml) ? requiredHtml + errorHtml : "";
10.
11.      }

 

2. Replace to Validation logic above with the following logic:

     2.1 Make the current input border red but do not display any validation error message.


     2.2 When users hover the input, it will display a tooltip with the validation message

 

[Scott]

I managed to make some progress by adding invalid class to the element to have red border as follow.

I also have tooltip implemented so that when users hover the input with red border, it will show the validation message in details but somehow tooltip does not shown up. When I inspect the generated codes in debugger, the control contains many generated html elements. There are two input generated, the first one has style display inline and visible. The second one look very similar to the first one but has style display to none. when I uncheck the display none style, the tooltip seems to work (I have a tooltip which filter any control has class = .invalid). Any idea why?

01.if (newValue)

02.{

03.   element.addClass("invalid");

04.   element.attr("validationMessage", newValue);

05. }

06.else {

07.    element.removeClass("invalid");

08.    element.removeAttr("validationMessage");

09.}


[Georgi Krustev]

Hello Scott,

In general, the NumericTextBox widget has two input elements, because one holds the number (the one that posts the value) and the other shows the formatted value. During initialization, we're trying to copy some of the original input attributes, but we do not copy everything. That being said, if you would like to show tooltip when second input is visible, then you will need to copy the attribute manually.
If you would like to move the "invalid" class dynamically, then I will suggest you use MutationObserver approach. You can find a working demo here.

Probably, you are already aware of the "custom rules" functionality of the Kendo UI validator, but nevertheless I will post a link to the documentation:

• http://docs.telerik.com/kendo-ui/framework/validator/overview#custom-validation-rules

With custom defined rules, you can validate inputs using custom data attributes easily.

Regards,
Georgi Krustev
Telerik