fix: Backend validations not showing on frontend for dynamic fields [VAN-1037] (#617)

src/register/RegistrationPage.jsx

@@ -395,7 +395,7 @@ class RegistrationPage extends React.Component {
     const { intl } = this.props;
     const { errors } = this.state;
     const { name, value } = e.target;
-    if (!value) {
+    if (!value.trim()) {
       errors[name] = this.props.fieldDescriptions[name].error_message;
     }
     if (name === 'confirm_email' && value.length > 0 && this.state.email && value !== this.state.email) {
@@ -489,7 +489,7 @@ class RegistrationPage extends React.Component {
         }
         break;
       case 'name':
-        if (!value) {
+        if (!value.trim()) {
           errors.name = intl.formatMessage(messages['empty.name.field.error']);
         } else if (value && value.match(urlRegex)) {
           errors.name = intl.formatMessage(messages['name.validation.message']);
@@ -530,7 +530,7 @@ class RegistrationPage extends React.Component {
         }
         break;
       case 'country':
-        if (!value) {
+        if (!value.trim()) {
           errors.country = intl.formatMessage(messages['empty.country.field.error']);
         } else {
           errors.country = '';

src/register/data/constants.js

@@ -38,9 +38,6 @@ export const EDUCATION_LEVELS = [
 
 export const GENDER_OPTIONS = ['', 'f', 'm', 'o'];
 
-// Other constants
-export const FORM_FIELDS = ['name', 'email', 'password', 'username', 'country'];
-
 export const COMMON_EMAIL_PROVIDERS = [
   'hotmail.com', 'yahoo.com', 'outlook.com', 'live.com', 'gmail.com',
 ];

src/register/data/selectors.js

@@ -1,7 +1,5 @@
 import { createSelector } from 'reselect';
 
-import { FORM_FIELDS } from './constants';
-
 export const storeName = 'register';
 
 export const registerSelector = state => ({ ...state[storeName] });
@@ -26,11 +24,12 @@ export const validationsSelector = createSelector(
     }
 
     if (Object.keys(registrationError).length > 0) {
-      const validationDecisions = {};
-      FORM_FIELDS.forEach(field => {
-        validationDecisions[field] = registrationError[field] ? registrationError[field][0].userMessage : '';
-      });
+      const fields = Object.keys(registrationError).filter((fieldName) => !(fieldName in ['errorCode', 'usernameSuggestions']));
 
+      const validationDecisions = {};
+      fields.forEach(field => {
+        validationDecisions[field] = registrationError[field][0].userMessage || '';
+      });
       return validationDecisions;
     }
 

src/register/tests/RegistrationPage.test.jsx

@@ -301,10 +301,7 @@ describe('RegistrationPage', () => {
       });
       const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />)).find('RegistrationPage');
       expect(registrationPage.prop('validationDecisions')).toEqual({
-        country: '',
         email: `This email is already associated with an existing or previous ${ getConfig().SITE_NAME } account`,
-        name: '',
-        password: '',
         username: 'It looks like this username is already taken',
       });
     });