-
Notifications
You must be signed in to change notification settings - Fork 58
Custom Validation functions
Since version 1.4.11
but improved in version 1.4.14
.
For a Custom Validation function (custom rules validation) to work, it is expected that you declare a custom function in your Controller
which will return a boolean
or an Object
. Keep reading below to understand how to code your custom function.
If you want to create a custom function with Promise
then you should probably look at the Wiki - Remote Validation (AJAX), it's the same implementation with promises.
A good example of a custom validation could be IBAN validation through an external library like Github - arhs/iban.js. This IBAN check was also added to the demo.
####Demo You can find a Plunker Demo here
####Note
Please note that the function could be called with or without the parentheses ()
. Meaning this validation="custom:myFunction"
is equal to this validation="custom:myFunction()"
####Defining your Custom Validation function Please note that there is 2 ways of defining a custom error message that will be displayed if an error occur.
- Use the
:alt=
(alternate text) message through the validator, example:validation="custom:myValidation:alt=Custom error"
- Or define error message directly inside the custom function by returning an object, for example:
myValidation() { return { isValid: false, message: 'custom error' }; }
The custom function declared in your controller could look like this.
vm.myCustomValidation1 = function() {
var isValid = false;
if(vm.model.input1 === "abc") {
isValid = true;
}
// you can return a boolean for isValid or an objec (see the next function)
// for this to work, you NEED to use the :alt= inside your validator
return isValid;
// or returned as an object if you want to include the custom error message
// this mean that you returning the error message here INSTEAD of the :alt=
return { isValid: false, message: 'custom error' };
}
// or argument(s), i.e. IBAN external library available at https://github.com/arhs/iban.js
vm.myIbanCheck = function(inputModel) {
return { isValid: IBAN.isValid(inputModel), message: 'Invalid IBAN.' };
}
####Directive
<!-- defining the remote function call by using `custom:` -->
<input type="text" class="form-control"
name="input1"
ng-model="vm.model.input1"
validation="custom:myCustomValidation|required" />
<!-- or use the Controller As alias -->
<input type="text" class="form-control"
name="input1"
ng-model="vm.model.input1"
validation="custom:vm.myCustomValidation|required" />
<!-- using `:alt=` for alternate text as error message -->
<input type="text" class="form-control"
name="input1"
ng-model="vm.model.input1"
validation="custom:vm.myCustomValidation:alt=Custom error message|required" />
<!-- You can combine that with other validators as well -->
<input type="text" class="form-control"
name="input1"
ng-model="vm.model.input1"
validation="alpha|min_len:2|custom:vm.myCustomValidation|required" />
<!-- we could also pass argument(s) to the function -->
<input type="text" class="form-control"
name="input1"
ng-model="vm.model.input1"
validation="custom:vm.myIbanCheck(vm.model.input1)|required" />
####Service Same thing, except that your validator rules are defined in the controller
// inject the validationService inside your Controller
myApp.controller('Ctrl', function ($scope, validationService) {
// start by creating the service
var vs = new validationService({ controllerAs: vms });
vs.addValidator({
elmName: 'input1',
scope: $scope,
rules: 'custom:myCustomValidation|required'
});
// or if you use the ControllerAs vm alias
// rules: 'custom:vm.myCustomValidation|required'
// or combine it with multiple validators
vs.addValidator({
elmName: 'input1',
scope: $scope,
rules: 'alpha|min_len:2|custom:myCustomValidation|required'
});
// or on 1 line
vs.addValidator('input1', 'alpha|min_len:2|custom:myCustomValidation|required');
});
For a complete test case example, you could also look at my code sample in my folder more-examples/customJavascript
Contents
- Angular-Validation Wiki
- Installation
- Demo
- Code Samples
- Functionalities
- Custom Validations
- Properties & Options
- Validators
- Tests
- Misc