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.

1. Use the :alt= (alternate text) message through the validator, example: validation="custom:myValidation:alt=Custom error"
2. 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