adding a prevalidation mode for usecases when you want validation on …

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+### 2.6.4 (Unreleased)
+
+- [#592](https://github.com/influxdata/clockface/pull/592): Add prevalidation mode for formValidationElement
+
+
 ### 2.6.3 (2021-3-15)
 
 - [#582](https://github.com/influxdata/clockface/pull/582): Add icons

src/Components/Form/Documentation/Form.stories.tsx

@@ -72,6 +72,10 @@ const mockValidationFunc = (value: string): string | null => {
     return 'Field cannot be empty'
   }
 
+  if (value.length >= 21) {
+    return 'Must be 20 characters or less'
+  }
+
   return null
 }
 
@@ -360,6 +364,7 @@ formStories.add(
             helpText={text('helpText', 'Help Text')}
             required={boolean('required', true)}
             validationFunc={mockValidationFunc}
+            prevalidate={boolean('prevalidate', false)}
           >
             {status => (
               <Input

src/Components/Form/FormValidationElement.tsx

@@ -33,6 +33,8 @@ export interface FormValidationElementProps extends StandardFunctionProps {
   required?: boolean
   /** Useful for associating a label with an input */
   htmlFor?: string
+  /** Pre-validation mode ( Validation happens ) */
+  prevalidate?: boolean
 }
 
 export type FormValidationElementRef = HTMLLabelElement
@@ -55,11 +57,12 @@ export const FormValidationElement = forwardRef<
       className,
       validationFunc,
       onStatusChange,
+      prevalidate = false,
       testID = 'form--validation-element',
     },
     ref
   ) => {
-    const shouldPerformValidation = useRef<boolean>(false)
+    const shouldPerformValidation = useRef<boolean>(prevalidate)
 
     let errorMessage = null
     let status = ComponentStatus.Default