form fixes

packages/vulcan-forms/lib/Form.jsx

@@ -201,7 +201,7 @@ class Form extends Component {
       // add error state
       const validationError = _.findWhere(this.state.errors, {name: 'app.validation_error'});
       if (validationError) {
-        const fieldErrors = _.filter(validationError.data.errors, error => error.data.value === fieldName);
+        const fieldErrors = _.filter(validationError.data.errors, error => error.data.fieldName === fieldName);
         if (fieldErrors) {
           field.errors = fieldErrors.map(error => ({...error, message: this.getErrorMessage(error)}));
         }
@@ -314,7 +314,13 @@ class Form extends Component {
   }
 
   getErrorMessage(error) {
-    return this.context.intl.formatMessage({id: error.id, defaultMessage: error.id}, {value: this.getLabel(error.data.value)});
+    if (error.data.fieldName) {
+      // if error has a corresponding field name, "labelify" that field name
+      const fieldName = this.getLabel(error.data.fieldName);
+      return this.context.intl.formatMessage({id: error.id, defaultMessage: error.id}, {...error.data, fieldName});
+    } else {
+      return this.context.intl.formatMessage({id: error.id, defaultMessage: error.id}, error.data);
+    }
   }
 
   // --------------------------------------------------------------------- //
@@ -350,7 +356,7 @@ class Form extends Component {
           
           } else { // this is a regular error
             
-            message = {content: error.message || this.context.intl.formatMessage({id: error.id, defaultMessage: error.id}, {value: error.data.value})}
+            message = {content: error.message || this.context.intl.formatMessage({id: error.id, defaultMessage: error.id}, error.data)}
 
           }
 
@@ -504,7 +510,8 @@ class Form extends Component {
       return;
     }
 
-    this.setState(prevState => ({disabled: true}));
+    // clear errors and disable form while it's submitting
+    this.setState(prevState => ({errors: [], disabled: true}));
 
     // complete the data with values from custom components which are not being catched by Formsy mixin
     // note: it follows the same logic as SmartForm's getDocument method

packages/vulcan-forms/lib/FormComponent.jsx

@@ -43,8 +43,9 @@ class FormComponent extends PureComponent {
 
   updateCharacterCount(name, value) {
     if (this.props.limit) {
+      const characterCount = value ? value.length : 0;
       this.setState({
-        limit: this.props.limit - value.length
+        limit: this.props.limit - characterCount
       });
     }
   }
@@ -57,6 +58,7 @@ class FormComponent extends PureComponent {
     // const base = typeof this.props.control === "function" ? this.props : rest;
 
     const properties = {
+      value: '', // default value, will be overridden by `rest` if real value has been passed down through props
       ...rest,
       onBlur: this.handleBlur,
       ref: (ref) => this.formControl = ref,
@@ -70,8 +72,6 @@ class FormComponent extends PureComponent {
     } else { // else pick a predefined component
 
       switch (this.props.control) {
-        case "text":
-          return <Input         {...properties} type="text" onChange={this.updateCharacterCount} />;
         case "number":
           return <Input         {...properties} type="number" onChange={this.updateCharacterCount} />;
         case "url":
@@ -83,7 +83,7 @@ class FormComponent extends PureComponent {
         case "checkbox":
           return <Checkbox      {...properties} />;
         case "checkboxgroup":
-          if (!properties.value) properties.value = [];
+          // if (!properties.value) properties.value = [];
           return <CheckboxGroup {...properties} />;
         case "radiogroup":
           // not sure why, but onChange needs to be specified here
@@ -93,8 +93,10 @@ class FormComponent extends PureComponent {
           return <Select        {...properties} />;
         case "datetime":
           return <DateTime      {...properties} />;
-        default:
+        case "text":
+        default: 
           return <Input         {...properties} type="text" onChange={this.updateCharacterCount} />;
+        
       }
 
     }

packages/vulcan-i18n-en-us/lib/en_US.js

@@ -201,7 +201,9 @@ addStrings('en', {
   "app.disallowed_property_detected": "Disallowed property detected: {value}",
   "app.something_bad_happened": "Something bad happened...",
   "app.embedly_not_authorized": "Invalid Embedly API key provided in the settings file. To find your key, log into https://app.embed.ly -> API",
-  "app.required_property_missing": "“{value}” is required.",
+  "app.required_field_missing": "{fieldName} is required.",
+  "app.field_is_too_long": "{fieldName} cannot exceed {limit} characters.",
+  "app.schema_validation_error": "Schema validation error",
   
   "newsletter": "Newsletter",
   "newsletter.subscribe": "Subscribe",