Format validation; redo of PR 3116

src/components/formik-forms/formik-input.jsx

@@ -11,9 +11,10 @@ require('../forms/row.scss');
 const FormikInput = ({
     className,
     error,
+    validationClassName,
     ...props
 }) => (
-    <div className="col-sm-9 row">
+    <div className="col-sm-9 row row-relative">
         <Field
             className={classNames(
                 'input',
@@ -22,7 +23,10 @@ const FormikInput = ({
             {...props}
         />
         {error && (
-            <ValidationMessage message={error} />
+            <ValidationMessage
+                className={validationClassName}
+                message={error}
+            />
         )}
     </div>
 );
@@ -31,7 +35,8 @@ const FormikInput = ({
 FormikInput.propTypes = {
     className: PropTypes.string,
     error: PropTypes.string,
-    type: PropTypes.string
+    type: PropTypes.string,
+    validationClassName: PropTypes.string
 };
 
 module.exports = FormikInput;

src/components/forms/row.scss

@@ -21,6 +21,11 @@
     }
 }
 
+/* allow elements such as validation errors to position relative to this row */
+.row-relative {
+    position: relative;
+}
+
 .row-label {
     margin-bottom: .75rem;
     line-height: 1.7rem;