@rjsf/core 5.0.0-beta.1 → 5.0.0-beta.10

package/dist/core.cjs.development.js

@@ -784,9 +784,11 @@ class ArrayField extends React.Component {
     } = this.props;
     const {
       fields: {
+        ArraySchemaField,
         SchemaField
       }
     } = registry;
+    const ItemSchemaField = ArraySchemaField || SchemaField;
     const {
       orderable = true,
       removable = true
@@ -799,7 +801,7 @@ class ArrayField extends React.Component {
     };
     has.toolbar = Object.keys(has).some(key => has[key]);
     return {
-      children: /*#__PURE__*/React__default["default"].createElement(SchemaField, {
+      children: /*#__PURE__*/React__default["default"].createElement(ItemSchemaField, {
         name: name,
         index: index,
         schema: itemSchema,
@@ -833,7 +835,8 @@ class ArrayField extends React.Component {
       onDropIndexClick: this.onDropIndexClick,
       onReorderClick: this.onReorderClick,
       readonly,
-      registry
+      registry,
+      uiSchema: itemUiSchema
     };
   }
 
@@ -1595,58 +1598,6 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
     });
   };
 }
-/** The `Help` component renders any help desired for a field
- *
- * @param props - The id and help information to be rendered
- */
-
-
-function Help(props) {
-  const {
-    id,
-    help
-  } = props;
-
-  if (!help) {
-    return null;
-  }
-
-  if (typeof help === "string") {
-    return /*#__PURE__*/React__default["default"].createElement("p", {
-      id: id,
-      className: "help-block"
-    }, help);
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    id: id,
-    className: "help-block"
-  }, help);
-}
-/** The `ErrorList` component renders the errors local to the particular field
- *
- * @param props - The list of errors to show
- */
-
-
-function ErrorList$1(props) {
-  const {
-    errors = []
-  } = props;
-
-  if (errors.length === 0) {
-    return null;
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "error-detail bs-callout bs-callout-info"
-  }, errors.filter(elem => !!elem).map((error, index) => {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "text-danger",
-      key: index
-    }, error);
-  })));
-}
 /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
  * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
  * `oneOf` fields.
@@ -1679,6 +1630,8 @@ function SchemaFieldRender(props) {
   const uiOptions = utils.getUiOptions(uiSchema);
   const FieldTemplate = utils.getTemplate("FieldTemplate", registry, uiOptions);
   const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  const FieldHelpTemplate = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
+  const FieldErrorTemplate = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
   const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, _idSchema.$id, formData, idPrefix, idSeparator), _idSchema);
   const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
@@ -1724,16 +1677,15 @@ function SchemaFieldRender(props) {
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = uiOptions.title || props.schema.title || schema.title || name;
+    label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
   }
 
   const description = uiOptions.description || props.schema.description || schema.description || "";
-  const errors = __errors;
   const help = uiOptions.help;
   const hidden = uiOptions.widget === "hidden";
   const classNames = ["form-group", "field", "field-" + schema.type];
 
-  if (!hideError && errors && errors.length > 0) {
+  if (!hideError && __errors && __errors.length > 0) {
     classNames.push("field-error has-error has-danger");
   }
 
@@ -1749,6 +1701,22 @@ function SchemaFieldRender(props) {
     classNames.push(uiOptions.classNames);
   }
 
+  const helpComponent = /*#__PURE__*/React__default["default"].createElement(FieldHelpTemplate, {
+    help: help,
+    idSchema: idSchema,
+    schema: schema,
+    uiSchema: uiSchema,
+    hasErrors: !hideError && __errors && __errors.length > 0,
+    registry: registry
+  });
+  const errorsComponent = hideError ? undefined : /*#__PURE__*/React__default["default"].createElement(FieldErrorTemplate, {
+    errors: __errors,
+    errorSchema: errorSchema,
+    idSchema: idSchema,
+    schema: schema,
+    uiSchema: uiSchema,
+    registry: registry
+  });
   const fieldProps = {
     description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
       id: id + "__description",
@@ -1756,15 +1724,10 @@ function SchemaFieldRender(props) {
       registry: registry
     }),
     rawDescription: description,
-    help: /*#__PURE__*/React__default["default"].createElement(Help, {
-      id: id + "__help",
-      help: help
-    }),
+    help: helpComponent,
     rawHelp: typeof help === "string" ? help : undefined,
-    errors: hideError ? undefined : /*#__PURE__*/React__default["default"].createElement(ErrorList$1, {
-      errors: errors
-    }),
-    rawErrors: hideError ? undefined : errors,
+    errors: errorsComponent,
+    rawErrors: hideError ? undefined : __errors,
     id,
     label,
     hidden,
@@ -1932,6 +1895,7 @@ function NullField(props) {
 const fields = {
   AnyOfField: AnyOfField,
   ArrayField,
+  // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
   BooleanField,
   NumberField,
   ObjectField,
@@ -1987,7 +1951,8 @@ function ArrayFieldItemTemplate(props) {
     onDropIndexClick,
     onReorderClick,
     readonly,
-    registry
+    registry,
+    uiSchema
   } = props;
   const {
     MoveDownButton,
@@ -2015,15 +1980,18 @@ function ArrayFieldItemTemplate(props) {
   }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
     style: btnStyle,
     disabled: disabled || readonly || !hasMoveUp,
-    onClick: onReorderClick(index, index - 1)
+    onClick: onReorderClick(index, index - 1),
+    uiSchema: uiSchema
   }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
     style: btnStyle,
     disabled: disabled || readonly || !hasMoveDown,
-    onClick: onReorderClick(index, index + 1)
+    onClick: onReorderClick(index, index + 1),
+    uiSchema: uiSchema
   }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
     style: btnStyle,
     disabled: disabled || readonly,
-    onClick: onDropIndexClick(index)
+    onClick: onDropIndexClick(index),
+    uiSchema: uiSchema
   }))));
 }
 
@@ -2085,7 +2053,8 @@ function ArrayFieldTemplate(props) {
   })), canAdd && /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "array-item-add",
     onClick: onAddClick,
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   }));
 }
 
@@ -2192,8 +2161,8 @@ function BaseInputTemplate(props) {
   }, [onFocus, id]);
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
-    key: id,
     id: id,
+    name: id,
     className: "form-control",
     readOnly: readonly,
     disabled: disabled,
@@ -2242,6 +2211,7 @@ function IconButton(props) {
     iconType = "default",
     icon,
     className,
+    uiSchema,
     ...otherProps
   } = props;
   return /*#__PURE__*/React__default["default"].createElement("button", {
@@ -2387,71 +2357,6 @@ function Label(props) {
   }, REQUIRED_FIELD_SYMBOL$1));
 }
 
-/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
- * part of an `additionalProperties` part of a schema.
- *
- * @param props - The `WrapIfAdditionalProps` for this component
- */
-
-function WrapIfAdditional(props) {
-  const {
-    id,
-    classNames,
-    disabled,
-    label,
-    onKeyChange,
-    onDropPropertyClick,
-    readonly,
-    required,
-    schema,
-    children,
-    registry
-  } = props;
-  const {
-    RemoveButton
-  } = registry.templates.ButtonTemplates;
-  const keyLabel = label + " Key"; // i18n ?
-
-  const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-
-  if (!additional) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames
-    }, children);
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-xs-5 form-additional"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "form-group"
-  }, /*#__PURE__*/React__default["default"].createElement(Label, {
-    label: keyLabel,
-    required: required,
-    id: id + "-key"
-  }), /*#__PURE__*/React__default["default"].createElement("input", {
-    className: "form-control",
-    type: "text",
-    id: id + "-key",
-    onBlur: event => onKeyChange(event.target.value),
-    defaultValue: label
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "form-additional form-group col-xs-5"
-  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-xs-2"
-  }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-    className: "array-item-remove btn-block",
-    style: {
-      border: "0"
-    },
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label)
-  }))));
-}
-
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
  * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
  *
@@ -2468,8 +2373,12 @@ function FieldTemplate(props) {
     description,
     hidden,
     required,
-    displayLabel
+    displayLabel,
+    registry,
+    uiSchema
   } = props;
+  const uiOptions = utils.getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
 
   if (hidden) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2477,7 +2386,7 @@ function FieldTemplate(props) {
     }, children);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditional, { ...props
+  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, { ...props
   }, displayLabel && /*#__PURE__*/React__default["default"].createElement(Label, {
     label: label,
     required: required,
@@ -2485,6 +2394,63 @@ function FieldTemplate(props) {
   }), displayLabel && description ? description : null, children, errors, help);
 }
 
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+
+function FieldErrorTemplate(props) {
+  const {
+    errors = [],
+    idSchema
+  } = props;
+
+  if (errors.length === 0) {
+    return null;
+  }
+
+  const id = idSchema.$id + "__error";
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+    id: id,
+    className: "error-detail bs-callout bs-callout-info"
+  }, errors.filter(elem => !!elem).map((error, index) => {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "text-danger",
+      key: index
+    }, error);
+  })));
+}
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+
+function FieldHelpTemplate(props) {
+  const {
+    idSchema,
+    help
+  } = props;
+
+  if (!help) {
+    return null;
+  }
+
+  const id = idSchema.$id + "__help";
+
+  if (typeof help === "string") {
+    return /*#__PURE__*/React__default["default"].createElement("p", {
+      id: id,
+      className: "help-block"
+    }, help);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    id: id,
+    className: "help-block"
+  }, help);
+}
+
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
  * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
  * the properties.
@@ -2531,7 +2497,8 @@ function ObjectFieldTemplate(props) {
   }), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "object-property-expand",
     onClick: onAddClick(schema),
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   }));
 }
 
@@ -2571,6 +2538,74 @@ function UnsupportedField(props) {
   }, /*#__PURE__*/React__default["default"].createElement("p", null, "Unsupported field schema", idSchema && idSchema.$id && /*#__PURE__*/React__default["default"].createElement("span", null, " for", " field ", /*#__PURE__*/React__default["default"].createElement("code", null, idSchema.$id)), reason && /*#__PURE__*/React__default["default"].createElement("em", null, ": ", reason), "."), schema && /*#__PURE__*/React__default["default"].createElement("pre", null, JSON.stringify(schema, null, 2)));
 }
 
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+
+function WrapIfAdditionalTemplate(props) {
+  const {
+    id,
+    classNames,
+    disabled,
+    label,
+    onKeyChange,
+    onDropPropertyClick,
+    readonly,
+    required,
+    schema,
+    children,
+    uiSchema,
+    registry
+  } = props; // Button templates are not overridden in the uiSchema
+
+  const {
+    RemoveButton
+  } = registry.templates.ButtonTemplates;
+  const keyLabel = label + " Key"; // i18n ?
+
+  const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+
+  if (!additional) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames
+    }, children);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-xs-5 form-additional"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/React__default["default"].createElement(Label, {
+    label: keyLabel,
+    required: required,
+    id: id + "-key"
+  }), /*#__PURE__*/React__default["default"].createElement("input", {
+    className: "form-control",
+    type: "text",
+    id: id + "-key",
+    onBlur: event => onKeyChange(event.target.value),
+    defaultValue: label
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "form-additional form-group col-xs-5"
+  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-xs-2"
+  }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
+    className: "array-item-remove btn-block",
+    style: {
+      border: "0"
+    },
+    disabled: disabled || readonly,
+    onClick: onDropPropertyClick(label),
+    uiSchema: uiSchema
+  }))));
+}
+
 const templates = {
   ArrayFieldDescriptionTemplate,
   ArrayFieldItemTemplate,
@@ -2581,9 +2616,12 @@ const templates = {
   DescriptionFieldTemplate: DescriptionField,
   ErrorListTemplate: ErrorList,
   FieldTemplate,
+  FieldErrorTemplate,
+  FieldHelpTemplate,
   ObjectFieldTemplate,
   TitleFieldTemplate: TitleField,
-  UnsupportedFieldTemplate: UnsupportedField
+  UnsupportedFieldTemplate: UnsupportedField,
+  WrapIfAdditionalTemplate
 };
 
 function rangeOptions(start, stop) {
@@ -2831,6 +2869,7 @@ function CheckboxWidget(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement("input", {
     type: "checkbox",
     id: id,
+    name: id,
     checked: typeof value === "undefined" ? false : value,
     required: required,
     disabled: disabled || readonly,
@@ -2878,7 +2917,7 @@ function CheckboxesWidget(_ref) {
     id: id
   }, Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = value.indexOf(option.value) !== -1;
-    const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
 
     const handleChange = event => {
@@ -2898,17 +2937,18 @@ function CheckboxesWidget(_ref) {
 
     const checkbox = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "checkbox",
-      id: id + "_" + index,
+      id: id + "-" + option.value,
+      name: id,
       checked: checked,
       disabled: disabled || itemDisabled || readonly,
       autoFocus: autofocus && index === 0,
       onChange: handleChange
     }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
-      key: index,
+      key: option.value,
       className: "checkbox-inline " + disabledCls
     }, checkbox) : /*#__PURE__*/React__default["default"].createElement("div", {
-      key: index,
+      key: option.value,
       className: "checkbox " + disabledCls
     }, /*#__PURE__*/React__default["default"].createElement("label", null, checkbox));
   }));
@@ -3114,6 +3154,7 @@ function FileWidget(_ref2) {
   }, [multiple, onChange]);
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", null, /*#__PURE__*/React__default["default"].createElement("input", {
     id: id,
+    name: id,
     type: "file",
     disabled: readonly || disabled,
     onChange: handleChange,
@@ -3140,6 +3181,7 @@ function HiddenWidget(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "hidden",
     id: id,
+    name: id,
     value: typeof value === "undefined" ? "" : value
   });
 }
@@ -3196,14 +3238,14 @@ function RadioWidget(_ref) {
     id: id
   }, Array.isArray(enumOptions) && enumOptions.map((option, i) => {
     const checked = option.value === value;
-    const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
 
     const handleChange = () => onChange(option.value);
 
     const radio = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "radio",
-      id: id + "_" + i,
+      id: id + "-" + option.value,
       checked: checked,
       name: name,
       required: required,
@@ -3215,10 +3257,10 @@ function RadioWidget(_ref) {
       onFocus: handleFocus
     }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
-      key: i,
+      key: option.value,
       className: "radio-inline " + disabledCls
     }, radio) : /*#__PURE__*/React__default["default"].createElement("div", {
-      key: i,
+      key: option.value,
       className: "radio " + disabledCls
     }, /*#__PURE__*/React__default["default"].createElement("label", null, radio));
   }));
@@ -3298,6 +3340,7 @@ function SelectWidget(_ref) {
   }, [onChange, schema, multiple, options]);
   return /*#__PURE__*/React__default["default"].createElement("select", {
     id: id,
+    name: id,
     multiple: multiple,
     className: "form-control",
     value: typeof value === "undefined" ? emptyValue : value,
@@ -3368,6 +3411,7 @@ function TextareaWidget(_ref) {
   }, [id, onFocus]);
   return /*#__PURE__*/React__default["default"].createElement("textarea", {
     id: id,
+    name: id,
     className: "form-control",
     value: value ? value : "",
     placeholder: placeholder,
@@ -3580,7 +3624,7 @@ class Form extends React.Component {
       }
 
       if (mustValidate) {
-        const schemaValidation = this.validate(schemaUtils, newFormData);
+        const schemaValidation = this.validate(newFormData);
         let errors = schemaValidation.errors;
         let errorSchema = schemaValidation.errorSchema;
         const schemaValidationErrors = errors;
@@ -3645,8 +3689,7 @@ class Form extends React.Component {
         omitExtraData,
         extraErrors,
         noValidate,
-        onSubmit,
-        onError
+        onSubmit
       } = this.props;
       let {
         formData: newFormData
@@ -3663,56 +3706,32 @@ class Form extends React.Component {
         newFormData = this.getUsedFormData(newFormData, fieldNames);
       }
 
-      if (!noValidate) {
-        const schemaValidation = this.validate(schemaUtils, newFormData);
-        let errors = schemaValidation.errors;
-        let errorSchema = schemaValidation.errorSchema;
-        const schemaValidationErrors = errors;
-        const schemaValidationErrorSchema = errorSchema;
-
-        if (errors.length > 0) {
-          if (extraErrors) {
-            const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
+      if (noValidate || this.validateForm()) {
+        // There are no errors generated through schema validation.
+        // Check for user provided errors and update state accordingly.
+        const errorSchema = extraErrors || {};
+        const errors = extraErrors ? schemaUtils.getValidator().toErrorList(extraErrors) : [];
+        this.setState({
+          formData: newFormData,
+          errors,
+          errorSchema,
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        }, () => {
+          if (onSubmit) {
+            onSubmit({ ...this.state,
+              formData: newFormData,
+              status: "submitted"
+            }, event);
           }
-
-          this.setState({
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          }, () => {
-            if (onError) {
-              onError(errors);
-            } else {
-              console.error("Form validation failed", errors);
-            }
-          });
-          return;
-        }
-      } // There are no errors generated through schema validation.
-      // Check for user provided errors and update state accordingly.
-
-
-      const errorSchema = extraErrors || {};
-      const errors = extraErrors ? schemaUtils.getValidator().toErrorList(extraErrors) : [];
-      this.setState({
-        formData: newFormData,
-        errors,
-        errorSchema,
-        schemaValidationErrors: [],
-        schemaValidationErrorSchema: {}
-      }, () => {
-        if (onSubmit) {
-          onSubmit({ ...this.state,
-            formData: newFormData,
-            status: "submitted"
-          }, event);
-        }
-      });
+        });
+      }
     };
 
+    if (!props.validator) {
+      throw new Error("A validator is required for Form functionality to work");
+    }
+
     this.state = this.getStateFromProps(props, props.formData);
 
     if (this.props.onChange && !utils.deepEquals(this.state.formData, this.props.formData)) {
@@ -3790,7 +3809,7 @@ class Form extends React.Component {
     let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
 
     if (mustValidate) {
-      const schemaValidation = this.validate(schemaUtils, formData, schema);
+      const schemaValidation = this.validate(formData, schema, schemaUtils);
       errors = schemaValidation.errors;
       errorSchema = schemaValidation.errorSchema;
       schemaValidationErrors = errors;
@@ -3836,19 +3855,21 @@ class Form extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     return utils.shouldRender(this, nextProps, nextState);
   }
-  /** Validates the `formData` against the `schema` using the `schemaUtils`, returning the results.
+  /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
+   * `schemaUtils` in the state), returning the results.
    *
-   * @param schemaUtils - The schemaUtils to use for validation
    * @param formData - The new form data to validate
    * @param schema - The schema used to validate against
+   * @param altSchemaUtils - The alternate schemaUtils to use for validation
    */
 
 
-  validate(schemaUtils, formData, schema) {
+  validate(formData, schema, altSchemaUtils) {
     if (schema === void 0) {
       schema = this.props.schema;
     }
 
+    const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
     const {
       customValidate,
       transformErrors
@@ -3931,8 +3952,57 @@ class Form extends React.Component {
       this.formElement.current.dispatchEvent(new CustomEvent("submit", {
         cancelable: true
       }));
+      this.formElement.current.requestSubmit();
     }
   }
+  /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
+   * same way as would happen on form submission.
+   *
+   * @returns - True if the form is valid, false otherwise.
+   */
+
+
+  validateForm() {
+    const {
+      extraErrors,
+      onError
+    } = this.props;
+    const {
+      formData
+    } = this.state;
+    const {
+      schemaUtils
+    } = this.state;
+    const schemaValidation = this.validate(formData);
+    let errors = schemaValidation.errors;
+    let errorSchema = schemaValidation.errorSchema;
+    const schemaValidationErrors = errors;
+    const schemaValidationErrorSchema = errorSchema;
+
+    if (errors.length > 0) {
+      if (extraErrors) {
+        const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+
+      this.setState({
+        errors,
+        errorSchema,
+        schemaValidationErrors,
+        schemaValidationErrorSchema
+      }, () => {
+        if (onError) {
+          onError(errors);
+        } else {
+          console.error("Form validation failed", errors);
+        }
+      });
+      return false;
+    }
+
+    return true;
+  }
   /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
    * needed along with the submit button or any children of the form.
    */