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

package/dist/core.umd.development.js

@@ -774,9 +774,11 @@
       } = this.props;
       const {
         fields: {
+          ArraySchemaField,
           SchemaField
         }
       } = registry;
+      const ItemSchemaField = ArraySchemaField || SchemaField;
       const {
         orderable = true,
         removable = true
@@ -789,7 +791,7 @@
       };
       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,
@@ -823,7 +825,8 @@
         onDropIndexClick: this.onDropIndexClick,
         onReorderClick: this.onReorderClick,
         readonly,
-        registry
+        registry,
+        uiSchema: itemUiSchema
       };
     }
 
@@ -1585,58 +1588,6 @@
       });
     };
   }
-  /** 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.
@@ -1669,6 +1620,8 @@
     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);
@@ -1714,16 +1667,15 @@
     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");
     }
 
@@ -1739,6 +1691,22 @@
       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",
@@ -1746,15 +1714,10 @@
         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,
@@ -1922,6 +1885,7 @@
   const fields = {
     AnyOfField: AnyOfField,
     ArrayField,
+    // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
     BooleanField,
     NumberField,
     ObjectField,
@@ -1977,7 +1941,8 @@
       onDropIndexClick,
       onReorderClick,
       readonly,
-      registry
+      registry,
+      uiSchema
     } = props;
     const {
       MoveDownButton,
@@ -2005,15 +1970,18 @@
     }, (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
     }))));
   }
 
@@ -2075,7 +2043,8 @@
     })), canAdd && /*#__PURE__*/React__default["default"].createElement(AddButton, {
       className: "array-item-add",
       onClick: onAddClick,
-      disabled: disabled || readonly
+      disabled: disabled || readonly,
+      uiSchema: uiSchema
     }));
   }
 
@@ -2182,8 +2151,8 @@
     }, [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,
@@ -2232,6 +2201,7 @@
       iconType = "default",
       icon,
       className,
+      uiSchema,
       ...otherProps
     } = props;
     return /*#__PURE__*/React__default["default"].createElement("button", {
@@ -2377,71 +2347,6 @@
     }, 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.
    *
@@ -2458,8 +2363,12 @@
       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", {
@@ -2467,7 +2376,7 @@
       }, 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,
@@ -2475,6 +2384,63 @@
     }), 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.
@@ -2521,7 +2487,8 @@
     }), 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
     }));
   }
 
@@ -2561,6 +2528,74 @@
     }, /*#__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,
@@ -2571,9 +2606,12 @@
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
     FieldTemplate,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
-    UnsupportedFieldTemplate: UnsupportedField
+    UnsupportedFieldTemplate: UnsupportedField,
+    WrapIfAdditionalTemplate
   };
 
   function rangeOptions(start, stop) {
@@ -2821,6 +2859,7 @@
     }), /*#__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,
@@ -2868,7 +2907,7 @@
       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 => {
@@ -2888,17 +2927,18 @@
 
       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));
     }));
@@ -3104,6 +3144,7 @@
     }, [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,
@@ -3130,6 +3171,7 @@
     return /*#__PURE__*/React__default["default"].createElement("input", {
       type: "hidden",
       id: id,
+      name: id,
       value: typeof value === "undefined" ? "" : value
     });
   }
@@ -3186,14 +3228,14 @@
       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,
@@ -3205,10 +3247,10 @@
         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));
     }));
@@ -3288,6 +3330,7 @@
     }, [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,
@@ -3358,6 +3401,7 @@
     }, [id, onFocus]);
     return /*#__PURE__*/React__default["default"].createElement("textarea", {
       id: id,
+      name: id,
       className: "form-control",
       value: value ? value : "",
       placeholder: placeholder,
@@ -3570,7 +3614,7 @@
         }
 
         if (mustValidate) {
-          const schemaValidation = this.validate(schemaUtils, newFormData);
+          const schemaValidation = this.validate(newFormData);
           let errors = schemaValidation.errors;
           let errorSchema = schemaValidation.errorSchema;
           const schemaValidationErrors = errors;
@@ -3635,8 +3679,7 @@
           omitExtraData,
           extraErrors,
           noValidate,
-          onSubmit,
-          onError
+          onSubmit
         } = this.props;
         let {
           formData: newFormData
@@ -3653,56 +3696,32 @@
           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)) {
@@ -3780,7 +3799,7 @@
       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;
@@ -3826,19 +3845,21 @@
     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
@@ -3921,8 +3942,57 @@
         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.
      */