This is a migrated thread and some comments may be shown as answers.

Angular Kendo Validator

16 Answers 904 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Emanuele
Top achievements
Rank 1
Emanuele asked on 25 Jun 2014, 02:27 PM
In Angular-kendo directives pages there is an example with default validation rules, but if we want to create multiple validation rules? How could we create a custom validation widget in controller, is it possbile? We use the gettext angular library to translate texts on pages but with custom validation it was a little difficult to do, because the only way to create a custom validation rules and message was by script and jquery and passing message traslated by data-message attribute.

16 Answers, 1 is accepted

Sort by
0
Mihai
Telerik team
answered on 26 Jun 2014, 11:07 AM
Hi,

You can fully customize the rules and the messages by passing configuration options.  Please see the Validator documentation for how to do that.

To pass those options with AngularJS you can do one of the following:

1. <form kendo-validator k-options="myValidatorOptions">, and in your controller define $scope.myValidatorOptions = { rules: ..., messages: ... }

2. <form kendo-validator k-rules="myRules" k-messages="myMessages">, and in your controller define $scope.myRules and $scope.myMessages.

Hope this helps.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Emanuele
Top achievements
Rank 1
answered on 26 Jun 2014, 12:58 PM
Hi,
It works.
Thank you!
0
Emanuele
Top achievements
Rank 1
answered on 26 Jun 2014, 01:55 PM
Next Question :)
How to disable submit button on validation errors? I think we could intercept custom rules but in this case we need to make a new rules for "required" case. I try to count errors array but it doean't work. I try to add validate event in options array but it doesn't fire.
0
Emanuele
Top achievements
Rank 1
answered on 26 Jun 2014, 02:52 PM
this my code : <button class="k-button" ng-disabled="changepswform.$invalid" type="submit" data-ng-click="changepsw()" translate>Change</button>
naturally button is disabled with fields empty (because of  "required" attribute on input field)
Now i leave button enabled (when fields are not empty but woth custom errors) and check for validator.validate() before  doing action of submit. This is the best options i found. Not an elegant solution but... Any kind suggestion?
0
Mihai
Telerik team
answered on 27 Jun 2014, 09:30 AM
Hi Emanuele,

There seems to be no way to do that currently.  Calling validator.validate() in your submit handler is the best solution at the moment.

I will discuss with the team to see if we can get the required changes in Validator.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mihai
Telerik team
answered on 27 Jun 2014, 11:03 AM
Hi,

FYI, we will provide a nicer solution for this in the next Kendo release.  You will be able to write it like this:

<form kendo-validator ng-model="isValid">
  ...
  <button type="submit" ng-disabled="!isValid">Submit</button>


Best,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Emanuele
Top achievements
Rank 1
answered on 27 Jun 2014, 12:49 PM
Hi,
excuse the last post solution is just to clarify you prior answer and so i have to valorize isValid with validator.validate() in submit handler? or i misunderstand it?
0
Mihai
Telerik team
answered on 27 Jun 2014, 04:42 PM
Hi,

No, you will not have to call validate() manually.  ng-model will just work as for any other widget, binding a variable in scope to the value of the validator (which shall be a true or false boolean).  Hope this clarifies.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajesh
Top achievements
Rank 1
answered on 09 Oct 2014, 06:27 AM
Hi Mihai,

From which version of Kendo will this be available ?

can I have two forms using two different kendo-validators ? I am getting an error saying the second kendo-validator is not defined in the angular scope.

-Rajesh
0
Mihai
Telerik team
answered on 09 Oct 2014, 08:39 AM
Hi Rajesh,

Support for ng-model in kendo-validator has been implemented as part of this issue.  It's available in all Q2 builds.

Yes, you can definitely have two forms with two validators.  If you can't get it working please post a dojo so we can see what fails.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajesh
Top achievements
Rank 1
answered on 10 Oct 2014, 06:00 PM
Here is a dojo with the issue

http://dojo.telerik.com/@rtv/aCoc

Issue 1: To see the issue, click on the add button with the browser debugging console open. Note how hitting save and close calls the validator.validate method and successfully validates the form.

Now open the row detail to see the edit window link. Click on this link and hit save on the kendo window that shows up. Notice the error in the browser console that says that the editDeviceValidator could not be resolved.

Issue 2 : The k-options ($scope.formValidations in my case) is called for each attribute and each call invokes each of the rules. I had to add a specific check for undefined to avoid the rules returning false. Is this the correct way to do it.
0
Mihai
Telerik team
answered on 14 Oct 2014, 11:04 AM
Hi Rajesh,

That's because the second validator is created in a nested scope.  To workaround this issue you can proceed similarly to how you handled your other variables (you used the allDevices namespace).  Here is an example where I've put both validators under a $scope.validators object, and now it works: http://dojo.telerik.com/ayUXo

As for the second question, my advice would be to use different option objects for different validators, but yes, the way you handle it should work as well.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajesh
Top achievements
Rank 1
answered on 15 Oct 2014, 04:15 AM
Thanks a ton Mihai. I would have never guessed that myself. (as much as I should have)

Unrelated, Is there a way to clear the validation errors on a form. In the same example, if I hit Add and save, I'll have a bunch of errors show up against each field. Now if I hit the X button to close the window and then hit the Add button again to add a new device, all the validation errors show up again. Is there a way to clear these errors on close of the window ?

Thanks,
Rajesh
0
Mihai
Telerik team
answered on 15 Oct 2014, 10:34 AM
Hi,

You can use validator.hideMessages to clear the errors when the window closes.  I added the following:

    k-on-close="validators.myAddDeviceValidator.hideMessages()"

to the addNewDeviceKendoWindow: http://dojo.telerik.com/ayUXo/2

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajesh
Top achievements
Rank 1
answered on 15 Oct 2014, 10:50 AM
Thanks. That works perfectly well.

Do you have any update on my second question ?

Issue 2 : The k-options ($scope.formValidations in my case) is called for each attribute and each call invokes each of the rules. I had to add a specific check for undefined to avoid the rules returning false. Is this the correct way to do it.
0
Mihai
Telerik team
answered on 16 Oct 2014, 08:50 AM
Hi,

As I said in an earlier message:

As for the second question, my advice would be to use different option objects for different validators, but yes, the way you handle it should work as well.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Integration with other JS libraries
Asked by
Emanuele
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Emanuele
Top achievements
Rank 1
Rajesh
Top achievements
Rank 1
Share this question
or