Last active
April 26, 2024 13:06
-
-
Save lrvick/8789669 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; | |
| } |
for security reasons the CVV(CCV, CVC...) must be hidden and for compatibility(mozilla dnt support style password) issues this must be a directive also
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi Dears
i made this validation using select option and its working well but when i changed it to editable select it did not work for me .. i need to solve it urgently please
<span editable-select="ccinfo.month" e-ng-options="month.text for month in months track by month.value" e-required e-card-expiration e-ng-model-options="{allowInvalid:true}" e-id="inputCardExpiryMonth" e-name="inputCardExpiryMonth" e-ng-model="ccinfo.month"> {{ ccinfo.month.value || 'empty' }} </span> <span editable-select="ccinfo.year" e-ng-options="year as year for year in [] | range:currentYear:currentYear+13" e-card-expiration e-ng-model-options="{allowInvalid:true}" e-required e-id="inputCardExpiryYear" e-name="inputCardExpiryYear" e-ng-model="ccinfo.year"> {{ ccinfo.year || 'empty' }} </span> <span ng-messages="paymentMethod.inputCardExpiryMonth.$error" ng-messages-include="views/messages.html" ng-if="paymentMethod.inputCardExpiryMonth.$dirty && paymentMethod.inputCardExpiryYear.$dirty"> </span>Thanks in advance