-
-
Save johnzakariasabry/856bcb19e9a0023b8854828995f9bdd3 to your computer and use it in GitHub Desktop.
AngularJS credit card form with validation
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
| // MIT: http://opensource.org/licenses/MIT | |
| angular.module('app', []); | |
| angular.module('app').controller | |
| ( 'MainCtrl' | |
| , function($scope,$locale) { | |
| $scope.currentYear = new Date().getFullYear() | |
| $scope.currentMonth = new Date().getMonth() + 1 | |
| $scope.months = $locale.DATETIME_FORMATS.MONTH | |
| $scope.ccinfo = {type:undefined} | |
| $scope.save = function(data){ | |
| if ($scope.paymentForm.$valid){ | |
| console.log(data) // valid data saving stuff here | |
| } | |
| } | |
| } | |
| ) | |
| angular.module('app').directive | |
| ( 'creditCardType' | |
| , function(){ | |
| var directive = | |
| { require: 'ngModel' | |
| , link: function(scope, elm, attrs, ctrl){ | |
| ctrl.$parsers.unshift(function(value){ | |
| scope.ccinfo.type = | |
| (/^5[1-5]/.test(value)) ? "mastercard" | |
| : (/^4/.test(value)) ? "visa" | |
| : (/^3[47]/.test(value)) ? 'amex' | |
| : (/^6011|65|64[4-9]|622(1(2[6-9]|[3-9]\d)|[2-8]\d{2}|9([01]\d|2[0-5]))/.test(value)) ? 'discover' | |
| : undefined | |
| ctrl.$setValidity('invalid',!!scope.ccinfo.type) | |
| return value | |
| }) | |
| } | |
| } | |
| return directive | |
| } | |
| ) | |
| angular.module('app').directive | |
| ( 'cardExpiration' | |
| , function(){ | |
| var directive = | |
| { require: 'ngModel' | |
| , link: function(scope, elm, attrs, ctrl){ | |
| scope.$watch('[ccinfo.month,ccinfo.year]',function(value){ | |
| ctrl.$setValidity('invalid',true) | |
| if ( scope.ccinfo.year == scope.currentYear | |
| && scope.ccinfo.month <= scope.currentMonth | |
| ) { | |
| ctrl.$setValidity('invalid',false) | |
| } | |
| return value | |
| },true) | |
| } | |
| } | |
| return directive | |
| } | |
| ) | |
| angular.module('app').filter | |
| ( 'range' | |
| , function() { | |
| var filter = | |
| function(arr, lower, upper) { | |
| for (var i = lower; i <= upper; i++) arr.push(i) | |
| return arr | |
| } | |
| return filter | |
| } | |
| ) |
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
| <!doctype html> | |
| <html ng-app="app" > | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>AngularJS Credit Card Validation Example</title> | |
| <script>document.write('<base href="' + document.location + '" />');</script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="http://code.angularjs.org/1.1.4/angular.js"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body ng-controller="MainCtrl"> | |
| <form novalidate name="paymentForm"> | |
| <input | |
| type="text" | |
| name="creditCard" | |
| ng-model="ccinfo.number" | |
| required | |
| data-credit-card-type | |
| data-ng-pattern="/^[0-9]+$/" | |
| data-ng-minlength="15" | |
| maxlength="19" | |
| placeholder="Card Number" >{{ccinfo.type}} | |
| <br/> | |
| <ul ng-show="paymentForm.submitAttempt && !paymentForm.$valid"> | |
| <li ng-show="paymentForm.creditCard.$error.minlength">Credit card must be 15-19 digits</li> | |
| <li ng-show="paymentForm.creditCard.$error.pattern">Credit card must consist of only numbers</li> | |
| <li ng-show="paymentForm.creditCard.$error.invalid">Credit card must be a valid Amex, Visa, Discover, or Master Card</li> | |
| <li ng-show="paymentForm.creditCard.$error.required">Credit card required</li> | |
| </ul> | |
| <input | |
| type="text" | |
| name="securityCode" | |
| ng-model="ccinfo.securityCode" | |
| placeholder="CCV" | |
| required | |
| data-ng-pattern="/^[0-9]+$/" | |
| data-ng-minlength="3" | |
| maxlength="4"> | |
| <br/> | |
| <ul ng-show="paymentForm.submitAttempt && !paymentForm.$valid"> | |
| <li ng-show="paymentForm.securityCode.$error.pattern">Security code must contain only numbers</li> | |
| <li ng-show="paymentForm.securityCode.$error.minlength">Security code must be 3-4 digits</li> | |
| <li ng-show="paymentForm.securityCode.$error.required">Security code required</li> | |
| </ul> | |
| <select ng-model="ccinfo.month" name="month" data-card-expiration required> | |
| <option disabled selected value="">Month</option> | |
| <option ng-repeat="month in months" value="{{$index+1}}" > {{$index+1}} - {{month}}</li> | |
| </select> | |
| <br/> | |
| <ul ng-show="paymentForm.submitAttempt && !paymentForm.$valid"> | |
| <li ng-show="paymentForm.month.$error.required">Expiration month required</li> | |
| </ul> | |
| <select ng-model="ccinfo.year" name="year" required> | |
| <option disabled selected value="">Year</option> | |
| <option ng-repeat="year in [] | range:currentYear:currentYear+13">{{year}}</li> | |
| </select> | |
| <br/> | |
| <ul ng-show="paymentForm.submitAttempt && !paymentForm.$valid"> | |
| <li ng-show="paymentForm.year.$error.required">Expiration year required</li> | |
| <li ng-show="paymentForm.month.$error.invalid">Provided expiration date is invalid</li> | |
| </ul> | |
| <button ng-click="paymentForm.submitAttempt=true;save(ccinfo)" type="submit">Submit</button> | |
| </body> | |
| </html> |
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
| input.ng-invalid.ng-dirty { | |
| background-color: #FA787E; | |
| } | |
| input.ng-valid.ng-dirty { | |
| background-color: #78FA89; | |
| } | |
| ul { | |
| margin:0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment