CodesJava

Easy learning with example program codes

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.

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



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki