mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
improved validation so that fields recurly said are wrong get highlighted
This commit is contained in:
parent
f6e9c544e6
commit
7508ba6c47
2 changed files with 24 additions and 20 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue