Angularjs custom validations tutorial

by

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.

Example:

<!DOCTYPE html>
<html>
<script 
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>  
<body ng-app="testApp">
 
<p>Enter in the input field:</p>
 
<form name="testForm">
<input name="testInput" ng-model="testInput" required test-directive>
</form>
 
<p>The input's valid state is:</p>
<h3>{{testForm.testInput.$valid}}</h3>
 
<script>
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;
            }
            mCtrl.$parsers.push(testValidation);
        }
    };
});
</script>
 
</body>
</html>

Try it:

JS Bin on jsbin.com