Skip to content

Instantly share code, notes, and snippets.

@lrvick
Last active April 26, 2024 13:06
Show Gist options
  • Save lrvick/8789669 to your computer and use it in GitHub Desktop.
Save lrvick/8789669 to your computer and use it in GitHub Desktop.
AngularJS credit card form with validation
// 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
}
)
<!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>
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
ul {
margin:0;
}
@johnzakariasabry
Copy link

johnzakariasabry commented Oct 11, 2017

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

@DFOXpro
Copy link

DFOXpro commented May 17, 2018

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