diff --git a/src/components/forms/phone-input.jsx b/src/components/forms/phone-input.jsx
index a4e26eb50..03a01470d 100644
--- a/src/components/forms/phone-input.jsx
+++ b/src/components/forms/phone-input.jsx
@@ -1,13 +1,15 @@
-var classNames = require('classnames');
-var React = require('react');
-var FormsyMixin = require('formsy-react').Mixin;
-var ReactPhoneInput = require('react-telephone-input/lib/withStyles');
var allCountries = require('react-telephone-input/lib/country_data').allCountries;
-var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-var validationHOCFactory = require('./validations.jsx').validationHOCFactory;
-var Row = require('formsy-react-components').Row;
+var classNames = require('classnames');
var ComponentMixin = require('formsy-react-components').ComponentMixin;
+var FormsyMixin = require('formsy-react').Mixin;
+var React = require('react');
+var ReactPhoneInput = require('react-telephone-input/lib/withStyles');
+var Row = require('formsy-react-components').Row;
+
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
var inputHOC = require('./input-hoc.jsx');
+var intl = require('../../lib/intl.jsx');
+var validationHOCFactory = require('./validations.jsx').validationHOCFactory;
var allIso2 = allCountries.map(function (country) {return country.iso2;});
@@ -23,7 +25,8 @@ var PhoneInput = React.createClass({
getDefaultProps: function () {
return {
validations: {
- isPhone: true
+ isPhone: true,
+ phoneLength: true
},
flagsImagePath: '/images/flags.png',
defaultCountry: 'us'
@@ -62,7 +65,8 @@ var PhoneInput = React.createClass({
});
var phoneValidationHOC = validationHOCFactory({
- isPhone: 'Please enter a valid phone number'
+ isPhone: ,
+ phoneLength:
});
module.exports = inputHOC(defaultValidationHOC(phoneValidationHOC(PhoneInput)));
diff --git a/src/components/forms/validations.jsx b/src/components/forms/validations.jsx
index 6410322b9..3d6dbbcc4 100644
--- a/src/components/forms/validations.jsx
+++ b/src/components/forms/validations.jsx
@@ -21,6 +21,14 @@ module.exports.validations = {
return false;
}
return phoneNumberUtil.isValidNumber(parsed);
+ },
+ phoneLength: function (values, value) {
+ if (typeof value === 'undefined') return true;
+ if (value && value.national_number === '+') return true;
+ if (value && value.national_number.length === value.country_code.format.length) {
+ return true;
+ }
+ return false;
}
};
diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx
index 5cb9ee1c1..f4f15fef3 100644
--- a/src/components/registration/steps.jsx
+++ b/src/components/registration/steps.jsx
@@ -82,38 +82,53 @@ module.exports = {
onChangeShowPassword: function (field, value) {
this.setState({showPassword: value});
},
- onValidSubmit: function (formData, reset, invalidate) {
- this.setState({waiting: true});
+ validateUsername: function (username) {
api({
host: '',
- uri: '/accounts/check_username/' + formData.user.username + '/'
+ uri: '/accounts/check_username/' + username + '/'
}, function (err, res) {
var formatMessage = this.props.intl.formatMessage;
- this.setState({waiting: false});
- if (err) return invalidate({all: err});
+ if (err) {
+ this.refs.form.refs.formsy.updateInputsWithError({all: err});
+ return false;
+ }
res = res[0];
switch (res.msg) {
case 'valid username':
this.setState({
validUsername: 'pass'
});
- return this.props.onNextStep(formData);
+ return true;
case 'username exists':
- return invalidate({
+ this.refs.form.refs.formsy.updateInputsWithError({
'user.username': formatMessage({id: 'registration.validationUsernameExists'})
});
+ return false;
case 'bad username':
- return invalidate({
+ this.refs.form.refs.formsy.updateInputsWithError({
'user.username': formatMessage({id: 'registration.validationUsernameVulgar'})
});
+ return false;
case 'invalid username':
default:
- return invalidate({
+ this.refs.form.refs.formsy.updateInputsWithError({
'user.username': formatMessage({id: 'registration.validationUsernameInvalid'})
});
+ return false;
}
}.bind(this));
},
+ onUsernameBlur: function (event) {
+ this.validateUsername(event.currentTarget.value);
+ },
+ onValidSubmit: function (formData) {
+ this.setState({waiting: true});
+ this.validateUsername(formData.user.username);
+ this.setState({waiting: false});
+ if (this.state.validUsername === 'pass') {
+ this.props.onNextStep(formData);
+ }
+ },
render: function () {
var formatMessage = this.props.intl.formatMessage;
return (
@@ -139,7 +154,7 @@ module.exports = {
)}
-