Add validateOnLoad to FormField (#202)

Add validateOnLoad to FormField

Author: vine77

packages/react-components/source/react/library/form/FormField.js

@@ -18,22 +18,24 @@ const propTypes = {
   label: PropTypes.string.isRequired,
   /** The styling of the identifier for this field */
   labelType: PropTypes.oneOf(['primary', 'secondary']),
-  /* Depending on the field, value can be any type */
+  /** Depending on the field, value can be any type */
   // eslint-disable-next-line react/forbid-prop-types
   value: PropTypes.any,
   /** Form error, causing element to render red when present */
   error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   /** Expanded explainer for the field */
   description: PropTypes.string,
-  /* Is the field required */
+  /** Is the field required */
   required: PropTypes.bool,
-  /* The error message to display if the field is required but not present at validation */
+  /** The error message to display if the field is required but not present at validation */
   requiredFieldMessage: PropTypes.string,
-  /* An optional validation function. Will be passed in order: the current field value, and the entire form value */
+  /** Should an error message render on load (the rendered msg depends on the presence of required or validator) */
+  validateOnLoad: PropTypes.bool,
+  /** An optional validation function. Will be passed in order: the current field value, and the entire form value */
   validator: PropTypes.func,
-  /* An optional nested path at which to access field data. Nested path can be delimted with `.` or with brackets `[]`. For example: my.nested.array[0] */
+  /** An optional nested path at which to access field data. Nested path can be delimted with `.` or with brackets `[]`. For example: my.nested.array[0] */
   path: PropTypes.string,
-  /* Alternate inline display format */
+  /** Alternate inline display format */
   inline: PropTypes.bool,
   /** Width of the inline label */
   inlineLabelWidth: PropTypes.number,
@@ -53,6 +55,7 @@ const defaultProps = {
   description: '',
   required: false,
   requiredFieldMessage: 'Required field',
+  validateOnLoad: false,
   validator() {},
   path: '',
   inline: false,
@@ -68,6 +71,7 @@ const defaultProps = {
 export const formInputInterface = omit(
   [
     'requiredFieldMessage',
+    'validateOnLoad',
     'validator',
     'className',
     'description',

packages/react-components/source/react/library/form/internal/FormFieldElement.js

@@ -58,6 +58,7 @@ const FormFieldElement = props => {
       'className',
       'style',
       'requiredFieldMessage',
+      'validateOnLoad',
       'validator',
     ],
     props,

packages/react-components/source/react/library/form/internal/methods.js

@@ -189,6 +189,7 @@ export const updateFieldProps = (
     error,
     required,
     requiredFieldMessage,
+    validateOnLoad,
     validator,
   } = userProvidedFieldProps;
 
@@ -197,7 +198,7 @@ export const updateFieldProps = (
 
   let blockingError;
 
-  if (validate) {
+  if (validate || validateOnLoad) {
     if (required && isEmpty(value)) {
       blockingError = requiredFieldMessage;
     } else if (validator) {
@@ -214,7 +215,7 @@ export const updateFieldProps = (
    * Form.Field
    */
   const fieldProps = omit(
-    ['requiredFieldMessage', 'validator', 'error', 'path'],
+    ['requiredFieldMessage', 'validateOnLoad', 'validator', 'error', 'path'],
     userProvidedFieldProps,
   );