From 911ecc85162764f825d6995784c346a77284396d Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Fri, 12 Jul 2019 11:39:04 -0400
Subject: [PATCH] Format validation; redo of PR 3116

---
 src/components/formik-forms/formik-input.jsx | 11 ++++++++---
 src/components/forms/row.scss                |  5 +++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/formik-forms/formik-input.jsx b/src/components/formik-forms/formik-input.jsx
index ab62130a0..b128d6b6b 100644
--- a/src/components/formik-forms/formik-input.jsx
+++ b/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;
diff --git a/src/components/forms/row.scss b/src/components/forms/row.scss
index 17a8e3fa8..56f72fcc2 100644
--- a/src/components/forms/row.scss
+++ b/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;