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

View file

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