handle error when teacher country selection fails to resolve to country name

src/components/registration/steps.jsx

@@ -408,10 +408,14 @@ class DemographicsStep extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'birthDateValidator',
+            'countryValidator',
+            'getCountryName',
             'getMonthOptions',
             'getYearOptions',
             'handleChooseGender',
-            'handleValidSubmit'
+            'handleValidSubmit',
+            'isValidBirthdate'
         ]);
         this.state = {
             otherDisabled: true
@@ -435,16 +439,24 @@ class DemographicsStep extends React.Component {
     handleChooseGender (name, gender) {
         this.setState({otherDisabled: gender !== 'other'});
     }
-    handleValidSubmit (formData) {
     // look up country name using user's country code selection
-        if (formData.countryCode) {
+    getCountryName (values) {
-            const countryInfo = countryData.lookupCountryInfo(formData.countryCode);
+        if (values.countryCode) {
+            const countryInfo = countryData.lookupCountryInfo(values.countryCode);
             if (countryInfo) {
-                formData.user.country = countryInfo.name;
+                return countryInfo.name;
             }
         }
+        return null;
+    }
+    handleValidSubmit (formData) {
+        const countryName = this.getCountryName(formData);
+        if (countryName && formData.user) {
+            formData.user.country = countryName;
             return this.props.onNextStep(formData);
         }
+        return false;
+    }
     isValidBirthdate (year, month) {
         const birthdate = new Date(
             year,
@@ -457,6 +469,11 @@ class DemographicsStep extends React.Component {
         const isValid = this.isValidBirthdate(values['user.birth.year'], values['user.birth.month']);
         return isValid ? true : this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'});
     }
+    countryValidator (values) {
+        const countryName = this.getCountryName(values);
+        if (countryName) return true;
+        return this.props.intl.formatMessage({id: 'general.invalidSelection'});
+    }
     render () {
         const countryOptions = getCountryOptions(this.props.intl);
         return (
@@ -539,6 +556,9 @@ class DemographicsStep extends React.Component {
                             label={this.props.intl.formatMessage({id: 'general.country'})}
                             name="countryCode"
                             options={countryOptions}
+                            validations={{
+                                countryVal: values => this.countryValidator(values)
+                            }}
                             value={countryOptions[0].value}
                         />
                         <Checkbox

src/l10n.json

@@ -33,6 +33,7 @@
     "general.getStarted": "Get Started",
     "general.gender": "Gender",
     "general.guidelines": "Community Guidelines",
+    "general.invalidSelection": "Invalid selection",
     "general.jobs": "Jobs",
     "general.joinScratch": "Join Scratch",
     "general.legal": "Legal",