improved validation so that fields recurly said are wrong get highlighted

This commit is contained in:
Henry Oswald 2015-01-07 16:43:20 +00:00
parent f6e9c544e6
commit 7508ba6c47
2 changed files with 24 additions and 20 deletions

View file

@ -73,17 +73,18 @@ block content
div.alert.alert-warning.small(ng-hide="validation.correctCardNumber") #{translate("invalid")} #{translate("credit_card_number")}
.row
.col-md-6
.form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ")
.form-group(ng-class="validation.number == false || validation.errorFields.number ? 'has-error' : ''")
input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder="#{translate('credit_card_number')}")
.col-md-3
.form-group(ng-class="validation.correctCvv ? '' : 'has-error' ")
.form-group(ng-class="validation.correctCvv == false || validation.errorFields.cvv ? 'has-error' : ''")
input.form-control(ng-model='data.cvv', ng-blur="validateCvv()", placeholder="CVV")
.row
.col-md-12
div.alert.alert-warning.small(ng-hide="validation.correctExpiry") #{translate("invalid")} #{translate("expiry")}
.col-md-2
.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
select(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month')
.row
.col-md-3
.form-group(ng-class="validation.correctExpiry == false || validation.errorFields.month ? 'has-error' : ''")
select.form-control(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month')
option(value="", disabled, selected) Month
option(value="01") 01
option(value="02") 02
@ -98,8 +99,8 @@ block content
option(value="11") 11
option(value="12") 12
.col-md-3
.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
select(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year')
.form-group(ng-class="validation.correctExpiry == false || validation.errorFields.year ? 'has-error' : ''")
select.form-control(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year')
option(value="", disabled, selected) Year
option(value="2015") 2015
option(value="2016") 2016
@ -115,10 +116,10 @@ block content
option(value="2026") 2026
.row
.col-md-6
.form-group
.form-group(ng-class="validation.errorFields.first_name ? 'has-error' : ''")
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name", required, placeholder="#{translate('first_name')}")
.col-md-6
.form-group
.form-group(ng-class="validation.errorFields.last_name ? 'has-error' : ''")
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name", required, placeholder="#{translate('last_name')}")
hr
.row
@ -137,7 +138,7 @@ block content
.row
.col-md-7
.form-group
select.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()",required)
select.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()", required)
mixin countries_options()
.row
.col-md-8

View file

@ -15,10 +15,10 @@ define [
$scope.paymentMethod = "credit_card"
$scope.data =
number: undefined
month: undefined
year: undefined
cvv: undefined
number: ""
month: ""
year: ""
cvv: ""
first_name: ""
last_name: ""
postal_code: ""
@ -27,6 +27,7 @@ define [
city:""
country:window.countryCode
$scope.validation =
correctCardNumber : true
correctExpiry: true
@ -55,16 +56,16 @@ define [
$scope.currencyCode = newCurrency
pricing.currency(newCurrency).done()
$scope.validateCardNumber = ->
if $scope.data.number?
$scope.validateCardNumber = validateCardNumber = ->
if $scope.data.number?.length != 0
$scope.validation.correctCardNumber = recurly.validate.cardNumber($scope.data.number)
$scope.validateExpiry = ->
if $scope.data.month? and $scope.data.year?
$scope.validateExpiry = validateExpiry = ->
if $scope.data.month?.length != 0 and $scope.data.year?.length != 0
$scope.validation.correctExpiry = recurly.validate.expiry($scope.data.month, $scope.data.year)
$scope.validateCvv = ->
if $scope.data.cvv?
$scope.validateCvv = validateCvv = ->
if $scope.data.cvv?.length != 0
$scope.validation.correctCvv = recurly.validate.cvv($scope.data.cvv)
$scope.updateCountry = ->
@ -77,8 +78,10 @@ define [
$scope.usePaypal = false
completeSubscription = (err, recurly_token_id) ->
$scope.validation.errorFields = {}
if err?
$scope.genericError = err.message
_.each err.fields, (field)-> $scope.validation.errorFields[field] = true
else
postData =
_csrf: window.csrfToken