Added validations + minor fixes.

services/web/app/views/subscriptions/new.jade

@@ -175,6 +175,7 @@ block content
 												div(ng-if="price.next.tax!='0.00'").pull-right {{price.currency.symbol}}{{price.next.tax}}
 												div.pull-right
 													strong {{price.currency.symbol}}{{price.next.total}}
+								
 								.col-md-12(sixpack-when="simple")
 									form(ng-if="planName")
 										div.payment-method-toggle
@@ -196,10 +197,18 @@ block content
 												i.fa.fa-cc-paypal.fa-2x
 										//- TODO Validation messages
 										div(ng-if="paymentMethod === 'credit_card'")
+											ol 
+												li validation.correctCardNumber : {{ validation.correctCardNumber }}
+												li validation.correctExpiry : {{ validation.correctExpiry }}
+												li validation.correctCvv : {{ validation.correctCvv }}
+												li data.month : {{ data.month }}
+												li data.year : {{ data.year }}
+												li data.mmYY : {{ data.mmYY }}
+
 											.form-group
 												label(for="card-name") Name on card
 												input#card-name.form-control(type="text")
-											.form-group(ng-class="validation.number == false || validation.errorFields.number ? 'has-error' : ''")
+											.form-group(ng-class="validation.correctCardNumber == false || validation.errorFields.number ? 'has-error' : ''")
 												label(for="card-no") Card number
 												input#card-no.form-control(
 													type="text"
@@ -208,13 +217,15 @@ block content
 													cc-format-card-number)
 											.row
 												.col-xs-6
-													label Expiry date
-													input.form-control(
-														type="text"
-														ng-model="data.mmYY"
-														placeholder="MM // YY"
-														cc-format-expiry
-													)
+													.form-group.has-feedback(ng-class="validation.correctExpiry == false || validation.errorFields.expiry ? 'has-error' : ''")
+														label Expiry date
+														input.form-control(
+															type="text"
+															ng-model="data.mmYY"
+															placeholder="MM / YY"
+															ng-blur="validateExpiry()"
+															cc-format-expiry
+														)
 												.col-xs-6
 													.form-group.has-feedback(ng-class="validation.correctCvv == false || validation.errorFields.cvv ? 'has-error' : ''")
 														label Security code

services/web/public/coffee/directives/creditCards.coffee

@@ -78,6 +78,27 @@ define [
 		cardFromType = (type) ->
 			return card for card in cards when card.type is type
 
+		cardType = (num) ->
+			return null unless num
+			cardFromNumber(num)?.type or null
+
+		formatCardNumber = (num) ->
+			num = num.replace(/\D/g, '')
+			card = cardFromNumber(num)
+			return num unless card
+
+			upperLength = card.length[card.length.length - 1]
+			num = num[0...upperLength]
+
+			if card.format.global
+				num.match(card.format)?.join(' ')
+			else
+				groups = card.format.exec(num)
+				return unless groups?
+				groups.shift()
+				groups = $.grep(groups, (n) -> n) # Filter empty groups
+				groups.join(' ')
+
 		parseExpiry = (value = "") ->
 			[month, year] = value.split(/[\s\/]+/, 2)
 
@@ -97,6 +118,8 @@ define [
 		return {
 			fromNumber: cardFromNumber
 			fromType: cardFromType
+			cardType: cardType 
+			formatCardNumber: formatCardNumber  
 			defaultFormat: defaultFormat
 			defaultInputFormat: defaultInputFormat
 			parseExpiry: parseExpiry
@@ -144,7 +167,7 @@ define [
 			setTimeout ->
 				value   = $target.val()
 				value   = replaceFullWidthChars(value)
-				value   = $.payment.formatCardNumber(value)
+				value   = ccUtils.formatCardNumber(value)
 
 		formatCardNumber = (e) ->
 			# Only format if input is a number
@@ -367,7 +390,7 @@ define [
 		setCardType = (e) ->
 			$target  = $(e.currentTarget)
 			val      = $target.val()
-			cardType = $.payment.cardType(val) or 'unknown'
+			cardType = ccUtils.cardType(val) or 'unknown'
 
 			unless $target.hasClass(cardType)
 				allTypes = (card.type for card in cards)

services/web/public/coffee/main/new-subscription.coffee

@@ -3,7 +3,7 @@ define [
 	"directives/creditCards"
 ], (App)->
 
-	App.controller "NewSubscriptionController", ($scope, MultiCurrencyPricing, abTestManager, $http, sixpack, event_tracking)->
+	App.controller "NewSubscriptionController", ($scope, MultiCurrencyPricing, abTestManager, $http, sixpack, event_tracking, ccUtils)->
 		throw new Error("Recurly API Library Missing.")  if typeof recurly is "undefined"
 	
 		$scope.currencyCode = MultiCurrencyPricing.currencyCode
@@ -32,11 +32,16 @@ define [
 			coupon: window.couponCode
 			mmYY: ""
 
- 
+		$scope.$watch 'data.mmYY', (newVal) ->
+			parsedDateObj = ccUtils.parseExpiry newVal
+			if parsedDateObj?
+				$scope.data.month = parsedDateObj.month
+				$scope.data.year = parsedDateObj.year
+
 		$scope.validation =
 			correctCardNumber : true
 			correctExpiry: true
-			correctCvv:true
+			correctCvv: true
 
 		$scope.processing = false