Last active
April 10, 2016 15:47
-
-
Save alphamikevictor/b5f602d9d158a54d0026 to your computer and use it in GitHub Desktop.
AngularJS custom form validator for ip address and netmask plus animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script> | |
| <link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css" /> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> | |
| </head> | |
| <body ng-app="app"> | |
| <div class="container-fluid" ng-controller="testController"> | |
| <div class="container-fluid" ng-hide="showList" ng-class="{'animated fadeInDown': ! showList}"> | |
| <form novalidate name="serverForm"> | |
| <div class="form-group has-feedback" ng-class="{'has-success': serverForm.servername.$valid, 'has-error': serverForm.servername.$invalid}"> | |
| <label for="servername">Server Name: </label> | |
| <input ng-model="server.serverName" name="servername" ng-required="true" class="form-control"> | |
| <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-ok': serverForm.servername.$valid, 'glyphicon-remove': serverForm.servername.$invalid}" aria-hidden="true"></span> | |
| </div> | |
| <div class="form-group has-feedback" ng-class="{'has-success': serverForm.ipaddress.$valid, 'has-error': serverForm.ipaddress.$invalid}"> | |
| <label for="ipaddress">IP Address: </label> | |
| <input ng-model="server.ipAddress" ipaddress name="ipaddress" class="form-control"> | |
| <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-ok': serverForm.ipaddress.$valid, 'glyphicon-remove': serverForm.ipaddress.$invalid}" aria-hidden="true"></span> | |
| </div> | |
| <div class="form-group has-feedback" ng-class="{'has-success': serverForm.netmask.$valid, 'has-error': serverForm.netmask.$invalid}"> | |
| <label for="netmask">Netmask: </label> | |
| <input ng-model="server.netmask" netmask name="netmask" class="form-control"> | |
| <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-ok': serverForm.netmask.$valid, 'glyphicon-remove': serverForm.netmask.$invalid}" aria-hidden="true"></span> | |
| </div> | |
| <button class="btn btn-default" ng-class="{disabled: serverForm.$invalid}" ng-click="saveEdit()"> | |
| <span class="glyphicon glyphicon-edit"></span> Edit</button> | |
| <button class="btn btn-default" ng-click="cancel()"> | |
| <span class="glyphicon glyphicon-remove"></span> Cancel</button> | |
| </form> | |
| </div> | |
| <div class="container-fluid" ng-show="showList" ng-class="{'animated fadeInDown': showList}"> | |
| <table class="table table-hover table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Server Name</th> | |
| <th>IP Address</th> | |
| <th>Netmask</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="server in servers"> | |
| <td>{{ server.serverName }}</td> | |
| <td>{{ server.ipAddress }}</td> | |
| <td>{{ server.netmask }}</td> | |
| <td><a ng-click="edit(server)"><span class="glyphicon glyphicon-edit"></span> Edit</a></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| var app = angular.module('app',['ngAnimate']); | |
| app.directive('netmask',function(){ | |
| return { | |
| require: 'ngModel', | |
| link: function(scope,elem,attrs,ctrl){ | |
| ctrl.$validators.netmask = function (modelValue,viewValue){ | |
| if (ctrl.$isEmpty(modelValue)){ | |
| return false; | |
| } | |
| var matcher; | |
| if ( (matcher = viewValue.match(/^([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})$/)) != null){ | |
| var i; | |
| var availableMasks = ["255","254","252","248","240","224","192","128","0"]; | |
| var previous = "255"; | |
| for(i=1;i<5;i++) { | |
| if (previous === "255" && ( availableMasks.indexOf(matcher[i]) !== -1 )) { | |
| previous = matcher[i]; | |
| } | |
| else { | |
| if( matcher[i] !== "0"){ | |
| return false; | |
| } | |
| } | |
| } | |
| return true; | |
| } | |
| else{ | |
| return false; | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| app.directive('ipaddress',function(){ | |
| return { | |
| require: 'ngModel', | |
| link: function(scope,elem,attrs,ctrl){ | |
| ctrl.$validators.ipaddress = function (modelValue,viewValue){ | |
| if (ctrl.$isEmpty(modelValue)){ | |
| return false; | |
| } | |
| var matcher; | |
| if ( (matcher = viewValue.match(/^([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})$/)) != null){ | |
| var i; | |
| var previous = "255"; | |
| for(i=1;i<5;i++) { | |
| var octet = parseInt(matcher[i]); | |
| if (octet > 255) return false; | |
| } | |
| return true; | |
| } | |
| else{ | |
| return false; | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| app.controller('testController',['$scope',function($scope){ | |
| $scope.showList = true; | |
| $scope.edit = function(server){ | |
| $scope.server = {}; | |
| $scope.editedServerIndex = $scope.servers.indexOf(server); | |
| angular.copy(server,$scope.server); | |
| $scope.showList = false; | |
| }; | |
| $scope.saveEdit = function() { | |
| $scope.servers[$scope.editedServerIndex] = $scope.server; | |
| $scope.server = {}; | |
| $scope.editedServerIndex = null; | |
| $scope.showList = true; | |
| }; | |
| $scope.cancel = function(){ | |
| $scope.showList = true; | |
| $scope.server = {}; | |
| }; | |
| $scope.servers = [ | |
| {"id": 1, "serverName": "www.github.com" , "ipAddress" : "192.30.252.128" , "netmask": "255.255.255.255"}, | |
| {"id": 2, "serverName": "www.google.com" , "ipAddress" : "173.194.116.209" , "netmask": "255.255.255.255"}, | |
| {"id": 3, "serverName": "www.meneame.net" , "ipAddress" : "176.34.226.206" , "netmask": "255.255.255.255"}, | |
| {"id": 4, "serverName": "www.alosfogones.com" , "ipAddress" : "66.155.9.238" , "netmask": "255.255.255.255"}, | |
| {"id": 5, "serverName": "www.recipesfromspain.com" , "ipAddress" : "192.0.81.250" , "netmask": "255.255.255.255"}, | |
| {"id": 6, "serverName": "www.youtube.com" , "ipAddress" : "173.194.40.100" , "netmask": "255.255.255.255"}, | |
| {"id": 7, "serverName": "www.ibm.com" , "ipAddress" : "23.202.117.3" , "netmask": "255.255.255.255"}, | |
| {"id": 8, "serverName": "www.apple.com" , "ipAddress" : "23.55.140.116" , "netmask": "255.255.255.255"}, | |
| {"id": 9, "serverName": "www.microsoft.com" , "ipAddress" : "23.45.175.164" , "netmask": "255.255.255.255"}, | |
| {"id": 10, "serverName": "www.twitter.com" , "ipAddress" : "199.16.156.230" , "netmask": "255.255.255.255"}, | |
| {"id": 11, "serverName": "www.getbootstrap.com" , "ipAddress" : "192.30.252.153" , "netmask": "255.255.255.255"}, | |
| {"id": 12, "serverName": "www.angularjs.org" , "ipAddress" : "173.255.114.241" , "netmask": "255.255.255.255"}, | |
| ]; | |
| }]); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment