Add custom validation for organization and phone

It appears that the `required` field is not applied in the way we'd like it to be for the custom checkbox group and custom phone input fields, so do a `required` check on form submission. Additionally, this adds in a few style fixes. Fixes #695, #694, #693, #691

src/components/registration/steps.jsx

@@ -286,6 +286,14 @@ module.exports = {
                 waiting: false
             };
         },
+        onValidSubmit: function (formData, reset, invalidate) {
+            if (formData.phone.national_number.length !== formData.phone.country_code.format.length) {
+                return invalidate({
+                    'phone': this.props.intl.formatMessage({id: 'teacherRegistration.validationPhoneNumber'})
+                });
+            }
+            return this.props.onNextStep(formData);
+        },
         render: function () {
             var formatMessage = this.props.intl.formatMessage;
             return (
@@ -299,7 +307,7 @@ module.exports = {
                                  tipContent={formatMessage({id: 'teacherRegistration.nameStepTooltip'})} />
                     </p>
                     <Card>
-                        <Form onValidSubmit={this.props.onNextStep}>
+                        <Form onValidSubmit={this.onValidSubmit}>
                             <PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})}
                                         name="phone"
                                         defaultCountry={this.props.defaultCountry}
@@ -354,6 +362,14 @@ module.exports = {
         onChooseOrganization: function (name, values) {
             this.setState({otherDisabled: values.indexOf(this.organizationL10nStems.indexOf('orgChoiceOther')) === -1});
         },
+        onValidSubmit: function (formData, reset, invalidate) {
+            if (formData.organization.type.length < 1) {
+                return invalidate({
+                    'organization.type': this.props.intl.formatMessage({id: 'teacherRegistration.validationRequired'})
+                });
+            }
+            return this.props.onNextStep(formData);
+        },
         render: function () {
             var formatMessage = this.props.intl.formatMessage;
             return (
@@ -367,7 +383,7 @@ module.exports = {
                                  tipContent={formatMessage({id: 'teacherRegistration.nameStepTooltip'})} />
                     </p>
                     <Card>
-                        <Form onValidSubmit={this.props.onNextStep}>
+                        <Form onValidSubmit={this.onValidSubmit}>
                             <Input label={formatMessage({id: 'teacherRegistration.organization'})}
                                    type="text"
                                    name="organization.name"

src/views/teacherregistration/l10n.json

@@ -20,6 +20,7 @@
     "teacherRegistration.phoneNumber": "Phone Number",
     "teacherRegistration.phoneStepDescription": "Your phone number will not be displayed publicly, and will be kept confidential and secure",
     "teacherRegistration.phoneConsent": "Yes, the Scratch Team may call me to verify my Teacher Account if needed",
+    "teacherRegistration.validationPhoneNumber": "Please enter a valid phone number",
     "teacherRegistration.validationPhoneConsent": "You must consent to verification of your Teacher Account",
     "teacherRegistration.orgStepTitle": "Organization",
     "teacherRegistration.orgStepDescription": "Your information will not be displayed publicly, and will be kept confidential and secure",
@@ -52,5 +53,6 @@
     "teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?",
     "teacherRegistration.emailStepTitle": "Email Address",
     "teacherRegistration.emailStepDescription": "We will send you a confirmation email that will allow you to access your Scratch Teacher Account.",
-    "teacherRegistration.validationEmailMatch": "The emails do not match"
+    "teacherRegistration.validationEmailMatch": "The emails do not match",
+    "teacherRegistration.validationRequired": "This field is required"
 }

src/views/teacherregistration/teacherregistration.scss

@@ -30,7 +30,7 @@ body {
     .address-step,
     .email-step {
         .help-block {
-            transform: translate(15.5rem, -4rem);
+            transform: translate(15.75rem, -4rem);
         }
     }
 
@@ -40,7 +40,7 @@ body {
         }
 
         .help-block {
-            transform: translate(14rem, -4rem);
+            transform: translate(13rem, -2rem);
         }
 
         .radio {
@@ -65,7 +65,7 @@ body {
         }
 
         .help-block {
-            margin-top: .7rem;
+            margin-top: .5rem;
         }
 
         .checkbox-row {
@@ -80,6 +80,12 @@ body {
             transform: translate(16rem, -4rem);
         }
 
+        .checkbox-group {
+            .help-block {
+                transform: translate(16rem, -16rem);
+            }
+        }
+
         .organization-type,
         .url-input {
             p {
@@ -100,6 +106,14 @@ body {
         }
     }
 
+    .address-step {
+        .select {
+            .help-block {
+                transform: translate(0, .5rem);
+            }
+        }
+    }
+
     .usescratch-step {
         .form {
             .form-group {