To create a custom validator, you simply add your validator code as a method onto the
angular.validator
object and provide input(s) for the validator function. Each input provided is
treated as an argument to the validator function. Any additional inputs should be separated by
commas.
The following bit of pseudo-code shows how to set up a custom validator:
angular.validator('your_validator', function(input [,additional params]) { [your validation code]; if ( [validation succeeds] ) { return false; } else { return true; // No error message specified } }
Note that this validator returns "true" when the user's input is incorrect, as in "Yes, it's true, there was a problem with that input". If you prefer to provide more information when a validator detects a problem with input, you can specify an error message in the validator that angular will display when the user hovers over the input widget.
To specify an error message, replace "return true;
" with an error string, for example:
return "Must be a value between 1 and 5!";
Following is a sample UPS Tracking Number validator:
<script> angular.validator('upsTrackingNo', function(input, format) { var regexp = new RegExp("^" + format.replace(/9/g, '\\d') + "$"); return input.match(regexp)?"":"The format must match " + format; }); </script> <input type="text" name="trackNo" size="40" ng:validate="upsTrackingNo:'1Z 999 999 99 9999 999 9'" value="1Z 123 456 78 9012 345 6"/>
it('should validate correct UPS tracking number', function() { expect(element('input[name=trackNo]').attr('class')). not().toMatch(/ng-validation-error/); }); it('should not validate in correct UPS tracking number', function() { input('trackNo').enter('foo'); expect(element('input[name=trackNo]').attr('class')). toMatch(/ng-validation-error/); });
In this sample validator, we specify a regular expression against which to test the user's input.
Note that when the user's input matches regexp
, the function returns "false" (""); otherwise it
returns the specified error message ("true").
Note: you can also access the current angular scope and DOM element objects in your validator functions as follows:
this
=== The current angular scope.this.$element
=== The DOM element that contains the binding. This allows the filter to
manipulate the DOM in addition to transforming the input.