Angularjs custom validations tutorial

Angularjs custom validations:

AngularJS provides the facility to create the custom validations. We have to add a new directive to our application and provide the validation logic inside a function with certain specified arguments.

Example Explanation:

The ng-app directive initializes the application. We create a custom directive testDirective. We define validation logic inside testValidation function inside the testDirective directive. The input field value will be valid only if it contains ā€œjā€ character.


<!DOCTYPE html>
<body ng-app="testApp">
<p>Enter in the input field:</p>
<form name="testForm">
<input name="testInput" ng-model="testInput" required test-directive>
<p>The input's valid state is:</p>
var app = angular.module('testApp', []);
app.directive('testDirective', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
            function testValidation(value) {
                if (value.indexOf("j") > -1) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                return value;

Try it:

JS Bin on

Comments are closed.