@rjsf/core 5.18.4 → 5.18.6

package/dist/core.umd.js

@@ -1063,7 +1063,7 @@
       [onChange]
     );
     if (typeof lastValue === "string" && typeof value === "number") {
-      const re = new RegExp(`${value}`.replace(".", "\\.") + "\\.?0*$");
+      const re = new RegExp(`^(${String(value).replace(".", "\\.")})?\\.?0*$`);
       if (lastValue.match(re)) {
         value = lastValue;
       }
@@ -1180,20 +1180,23 @@
         const { formData, onChange, registry } = this.props;
         const newFormData = { ...formData };
         let type = void 0;
+        let defaultValue = void 0;
         if (isObject(schema.additionalProperties)) {
           type = schema.additionalProperties.type;
+          defaultValue = schema.additionalProperties.default;
           let apSchema = schema.additionalProperties;
           if (utils.REF_KEY in apSchema) {
             const { schemaUtils } = registry;
             apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
             type = apSchema.type;
+            defaultValue = apSchema.default;
           }
           if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
             type = "object";
           }
         }
         const newKey = this.getAvailableKey("newKey", newFormData);
-        set(newFormData, newKey, this.getDefaultValue(type));
+        set(newFormData, newKey, defaultValue ?? this.getDefaultValue(type));
         onChange(newFormData);
       };
     }
@@ -1241,8 +1244,8 @@
         idSchema,
         name,
         required = false,
-        disabled = false,
-        readonly = false,
+        disabled,
+        readonly,
         hideError,
         idPrefix,
         idSeparator,
@@ -1413,11 +1416,11 @@
       [fieldId, onChange]
     );
     const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
-    const disabled = Boolean(props.disabled || uiOptions.disabled);
-    const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
+    const disabled = Boolean(uiOptions.disabled ?? props.disabled);
+    const readonly = Boolean(uiOptions.readonly ?? props.readonly ?? props.schema.readOnly ?? schema.readOnly);
     const uiSchemaHideError = uiOptions.hideError;
     const hideError = uiSchemaHideError === void 0 ? props.hideError : Boolean(uiSchemaHideError);
-    const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
+    const autofocus = Boolean(uiOptions.autofocus ?? props.autofocus);
     if (Object.keys(schema).length === 0) {
       return null;
     }
@@ -1915,9 +1918,12 @@
       ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
       [onChange, options]
     );
-    const _onBlur = react.useCallback(({ target: { value: value2 } }) => onBlur(id, value2), [onBlur, id]);
+    const _onBlur = react.useCallback(
+      ({ target }) => onBlur(id, target && target.value),
+      [onBlur, id]
+    );
     const _onFocus = react.useCallback(
-      ({ target: { value: value2 } }) => onFocus(id, value2),
+      ({ target }) => onFocus(id, target && target.value),
       [onFocus, id]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2241,7 +2247,7 @@
             className: "form-control",
             type: "text",
             id: `${id}-key`,
-            onBlur: (event) => onKeyChange(event.target.value),
+            onBlur: ({ target }) => onKeyChange(target && target.value),
             defaultValue: label
           }
         )
@@ -2497,11 +2503,11 @@
   }) {
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
-      ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue)),
+      ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
       [onBlur, id]
     );
     const handleFocus = react.useCallback(
-      ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue)),
+      ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
       [onFocus, id]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
@@ -2744,11 +2750,11 @@
   }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const handleBlur = react.useCallback(
-      ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue)),
+      ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
       [onBlur, id]
     );
     const handleFocus = react.useCallback(
-      ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue)),
+      ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
       [onFocus, id]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
@@ -2881,11 +2887,11 @@
       [onChange, options.emptyValue]
     );
     const handleBlur = react.useCallback(
-      ({ target: { value: value2 } }) => onBlur(id, value2),
+      ({ target }) => onBlur(id, target && target.value),
       [onBlur, id]
     );
     const handleFocus = react.useCallback(
-      ({ target: { value: value2 } }) => onFocus(id, value2),
+      ({ target }) => onFocus(id, target && target.value),
       [id, onFocus]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3024,9 +3030,22 @@
         };
         return getAllPaths(pathSchema);
       };
+      /** Returns the `formData` after filtering to remove any extra data not in a form field
+       *
+       * @param formData - The data for the `Form`
+       * @returns The `formData` after omitting extra data
+       */
+      this.omitExtraData = (formData) => {
+        const { schema, schemaUtils } = this.state;
+        const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+        const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+        const fieldNames = this.getFieldNames(pathSchema, formData);
+        const newFormData = this.getUsedFormData(formData, fieldNames);
+        return newFormData;
+      };
       /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
        * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-       * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
+       * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
        * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
        * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
        * callback will be called if specified with the updated state.
@@ -3045,12 +3064,8 @@
         const mustValidate = !noValidate && liveValidate;
         let state = { formData, schema };
         let newFormData = formData;
-        let _retrievedSchema;
         if (omitExtraData === true && liveOmit === true) {
-          _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-          const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
-          const fieldNames = this.getFieldNames(pathSchema, formData);
-          newFormData = this.getUsedFormData(formData, fieldNames);
+          newFormData = this.omitExtraData(formData);
           state = {
             formData: newFormData
           };
@@ -3081,9 +3096,6 @@
             errors: utils.toErrorList(errorSchema)
           };
         }
-        if (_retrievedSchema) {
-          state.retrievedSchema = _retrievedSchema;
-        }
         this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
       };
       /**
@@ -3145,14 +3157,10 @@
         event.persist();
         const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
         let { formData: newFormData } = this.state;
-        const { schema, schemaUtils } = this.state;
         if (omitExtraData === true) {
-          const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-          const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
-          const fieldNames = this.getFieldNames(pathSchema, newFormData);
-          newFormData = this.getUsedFormData(newFormData, fieldNames);
+          newFormData = this.omitExtraData(newFormData);
         }
-        if (noValidate || this.validateForm()) {
+        if (noValidate || this.validateFormWithFormData(newFormData)) {
           const errorSchema = extraErrors || {};
           const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
           this.setState(
@@ -3182,6 +3190,59 @@
           this.formElement.current.requestSubmit();
         }
       };
+      /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
+       * If `onError` is provided, then it will be called with the list of errors.
+       *
+       * @param formData - The form data to validate
+       * @returns - True if the form is valid, false otherwise.
+       */
+      this.validateFormWithFormData = (formData) => {
+        const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
+        const { errors: prevErrors } = this.state;
+        const schemaValidation = this.validate(formData);
+        let errors = schemaValidation.errors;
+        let errorSchema = schemaValidation.errorSchema;
+        const schemaValidationErrors = errors;
+        const schemaValidationErrorSchema = errorSchema;
+        const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
+        if (hasError) {
+          if (extraErrors) {
+            const merged = utils.validationDataMerge(schemaValidation, extraErrors);
+            errorSchema = merged.errorSchema;
+            errors = merged.errors;
+          }
+          if (focusOnFirstError) {
+            if (typeof focusOnFirstError === "function") {
+              focusOnFirstError(errors[0]);
+            } else {
+              this.focusOnError(errors[0]);
+            }
+          }
+          this.setState(
+            {
+              errors,
+              errorSchema,
+              schemaValidationErrors,
+              schemaValidationErrorSchema
+            },
+            () => {
+              if (onError) {
+                onError(errors);
+              } else {
+                console.error("Form validation failed", errors);
+              }
+            }
+          );
+        } else if (prevErrors.length > 0) {
+          this.setState({
+            errors: [],
+            errorSchema: {},
+            schemaValidationErrors: [],
+            schemaValidationErrorSchema: {}
+          });
+        }
+        return !hasError;
+      };
       if (!props.validator) {
         throw new Error("A validator is required for Form functionality to work");
       }
@@ -3425,57 +3486,19 @@
         field.focus();
       }
     }
-    /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
+    /** Programmatically validate the form.  If `omitExtraData` is true, the `formData` will first be filtered to remove
+     * any extra data not in a form field. 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, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-      const { formData, errors: prevErrors } = this.state;
-      const schemaValidation = this.validate(formData);
-      let errors = schemaValidation.errors;
-      let errorSchema = schemaValidation.errorSchema;
-      const schemaValidationErrors = errors;
-      const schemaValidationErrorSchema = errorSchema;
-      const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
-      if (hasError) {
-        if (extraErrors) {
-          const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (focusOnFirstError) {
-          if (typeof focusOnFirstError === "function") {
-            focusOnFirstError(errors[0]);
-          } else {
-            this.focusOnError(errors[0]);
-          }
-        }
-        this.setState(
-          {
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          },
-          () => {
-            if (onError) {
-              onError(errors);
-            } else {
-              console.error("Form validation failed", errors);
-            }
-          }
-        );
-      } else if (prevErrors.length > 0) {
-        this.setState({
-          errors: [],
-          errorSchema: {},
-          schemaValidationErrors: [],
-          schemaValidationErrorSchema: {}
-        });
+      const { omitExtraData } = this.props;
+      let { formData: newFormData } = this.state;
+      if (omitExtraData === true) {
+        newFormData = this.omitExtraData(newFormData);
       }
-      return !hasError;
+      return this.validateFormWithFormData(newFormData);
     }
     /** 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.
@@ -3497,8 +3520,8 @@
         acceptcharset,
         acceptCharset,
         noHtml5Validate = false,
-        disabled = false,
-        readonly = false,
+        disabled,
+        readonly,
         formContext,
         showErrorList = "top",
         _internalFormWrapper

package/dist/index.esm.js

@@ -1134,7 +1134,7 @@ function NumberField(props) {
     [onChange]
   );
   if (typeof lastValue === "string" && typeof value === "number") {
-    const re = new RegExp(`${value}`.replace(".", "\\.") + "\\.?0*$");
+    const re = new RegExp(`^(${String(value).replace(".", "\\.")})?\\.?0*$`);
     if (lastValue.match(re)) {
       value = lastValue;
     }
@@ -1272,20 +1272,23 @@ var ObjectField = class extends Component3 {
       const { formData, onChange, registry } = this.props;
       const newFormData = { ...formData };
       let type = void 0;
+      let defaultValue = void 0;
       if (isObject3(schema.additionalProperties)) {
         type = schema.additionalProperties.type;
+        defaultValue = schema.additionalProperties.default;
         let apSchema = schema.additionalProperties;
         if (REF_KEY in apSchema) {
           const { schemaUtils } = registry;
           apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] }, formData);
           type = apSchema.type;
+          defaultValue = apSchema.default;
         }
         if (!type && (ANY_OF_KEY2 in apSchema || ONE_OF_KEY2 in apSchema)) {
           type = "object";
         }
       }
       const newKey = this.getAvailableKey("newKey", newFormData);
-      set2(newFormData, newKey, this.getDefaultValue(type));
+      set2(newFormData, newKey, defaultValue ?? this.getDefaultValue(type));
       onChange(newFormData);
     };
   }
@@ -1333,8 +1336,8 @@ var ObjectField = class extends Component3 {
       idSchema,
       name,
       required = false,
-      disabled = false,
-      readonly = false,
+      disabled,
+      readonly,
       hideError,
       idPrefix,
       idSeparator,
@@ -1524,11 +1527,11 @@ function SchemaFieldRender(props) {
     [fieldId, onChange]
   );
   const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
-  const disabled = Boolean(props.disabled || uiOptions.disabled);
-  const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
+  const disabled = Boolean(uiOptions.disabled ?? props.disabled);
+  const readonly = Boolean(uiOptions.readonly ?? props.readonly ?? props.schema.readOnly ?? schema.readOnly);
   const uiSchemaHideError = uiOptions.hideError;
   const hideError = uiSchemaHideError === void 0 ? props.hideError : Boolean(uiSchemaHideError);
-  const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
+  const autofocus = Boolean(uiOptions.autofocus ?? props.autofocus);
   if (Object.keys(schema).length === 0) {
     return null;
   }
@@ -2073,9 +2076,12 @@ function BaseInputTemplate(props) {
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options]
   );
-  const _onBlur = useCallback3(({ target: { value: value2 } }) => onBlur(id, value2), [onBlur, id]);
+  const _onBlur = useCallback3(
+    ({ target }) => onBlur(id, target && target.value),
+    [onBlur, id]
+  );
   const _onFocus = useCallback3(
-    ({ target: { value: value2 } }) => onFocus(id, value2),
+    ({ target }) => onFocus(id, target && target.value),
     [onFocus, id]
   );
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
@@ -2467,7 +2473,7 @@ function WrapIfAdditionalTemplate(props) {
           className: "form-control",
           type: "text",
           id: `${id}-key`,
-          onBlur: (event) => onKeyChange(event.target.value),
+          onBlur: ({ target }) => onKeyChange(target && target.value),
           defaultValue: label
         }
       )
@@ -2761,11 +2767,11 @@ function CheckboxesWidget({
 }) {
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const handleBlur = useCallback6(
-    ({ target: { value: value2 } }) => onBlur(id, enumOptionsValueForIndex(value2, enumOptions, emptyValue)),
+    ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
     [onBlur, id]
   );
   const handleFocus = useCallback6(
-    ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex(value2, enumOptions, emptyValue)),
+    ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
     [onFocus, id]
   );
   return /* @__PURE__ */ jsx29("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
@@ -3056,11 +3062,11 @@ function RadioWidget({
 }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const handleBlur = useCallback9(
-    ({ target: { value: value2 } }) => onBlur(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue)),
+    ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue)),
     [onBlur, id]
   );
   const handleFocus = useCallback9(
-    ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue)),
+    ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue)),
     [onFocus, id]
   );
   return /* @__PURE__ */ jsx37("div", { className: "field-radio-group", id, children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
@@ -3210,11 +3216,11 @@ function TextareaWidget({
     [onChange, options.emptyValue]
   );
   const handleBlur = useCallback11(
-    ({ target: { value: value2 } }) => onBlur(id, value2),
+    ({ target }) => onBlur(id, target && target.value),
     [onBlur, id]
   );
   const handleFocus = useCallback11(
-    ({ target: { value: value2 } }) => onFocus(id, value2),
+    ({ target }) => onFocus(id, target && target.value),
     [id, onFocus]
   );
   return /* @__PURE__ */ jsx40(
@@ -3373,9 +3379,22 @@ var Form = class extends Component5 {
       };
       return getAllPaths(pathSchema);
     };
+    /** Returns the `formData` after filtering to remove any extra data not in a form field
+     *
+     * @param formData - The data for the `Form`
+     * @returns The `formData` after omitting extra data
+     */
+    this.omitExtraData = (formData) => {
+      const { schema, schemaUtils } = this.state;
+      const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+      const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+      const fieldNames = this.getFieldNames(pathSchema, formData);
+      const newFormData = this.getUsedFormData(formData, fieldNames);
+      return newFormData;
+    };
     /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
      * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-     * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
+     * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
      * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
      * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
      * callback will be called if specified with the updated state.
@@ -3396,10 +3415,7 @@ var Form = class extends Component5 {
       let newFormData = formData;
       let _retrievedSchema;
       if (omitExtraData === true && liveOmit === true) {
-        _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-        const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
-        const fieldNames = this.getFieldNames(pathSchema, formData);
-        newFormData = this.getUsedFormData(formData, fieldNames);
+        newFormData = this.omitExtraData(formData);
         state = {
           formData: newFormData
         };
@@ -3494,14 +3510,10 @@ var Form = class extends Component5 {
       event.persist();
       const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
       let { formData: newFormData } = this.state;
-      const { schema, schemaUtils } = this.state;
       if (omitExtraData === true) {
-        const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-        const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
-        const fieldNames = this.getFieldNames(pathSchema, newFormData);
-        newFormData = this.getUsedFormData(newFormData, fieldNames);
+        newFormData = this.omitExtraData(newFormData);
       }
-      if (noValidate || this.validateForm()) {
+      if (noValidate || this.validateFormWithFormData(newFormData)) {
         const errorSchema = extraErrors || {};
         const errors = extraErrors ? toErrorList(extraErrors) : [];
         this.setState(
@@ -3531,6 +3543,59 @@ var Form = class extends Component5 {
         this.formElement.current.requestSubmit();
       }
     };
+    /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
+     * If `onError` is provided, then it will be called with the list of errors.
+     *
+     * @param formData - The form data to validate
+     * @returns - True if the form is valid, false otherwise.
+     */
+    this.validateFormWithFormData = (formData) => {
+      const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
+      const { errors: prevErrors } = this.state;
+      const schemaValidation = this.validate(formData);
+      let errors = schemaValidation.errors;
+      let errorSchema = schemaValidation.errorSchema;
+      const schemaValidationErrors = errors;
+      const schemaValidationErrorSchema = errorSchema;
+      const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
+      if (hasError) {
+        if (extraErrors) {
+          const merged = validationDataMerge(schemaValidation, extraErrors);
+          errorSchema = merged.errorSchema;
+          errors = merged.errors;
+        }
+        if (focusOnFirstError) {
+          if (typeof focusOnFirstError === "function") {
+            focusOnFirstError(errors[0]);
+          } else {
+            this.focusOnError(errors[0]);
+          }
+        }
+        this.setState(
+          {
+            errors,
+            errorSchema,
+            schemaValidationErrors,
+            schemaValidationErrorSchema
+          },
+          () => {
+            if (onError) {
+              onError(errors);
+            } else {
+              console.error("Form validation failed", errors);
+            }
+          }
+        );
+      } else if (prevErrors.length > 0) {
+        this.setState({
+          errors: [],
+          errorSchema: {},
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        });
+      }
+      return !hasError;
+    };
     if (!props.validator) {
       throw new Error("A validator is required for Form functionality to work");
     }
@@ -3774,57 +3839,19 @@ var Form = class extends Component5 {
       field.focus();
     }
   }
-  /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
+  /** Programmatically validate the form.  If `omitExtraData` is true, the `formData` will first be filtered to remove
+   * any extra data not in a form field. 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, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-    const { formData, errors: prevErrors } = this.state;
-    const schemaValidation = this.validate(formData);
-    let errors = schemaValidation.errors;
-    let errorSchema = schemaValidation.errorSchema;
-    const schemaValidationErrors = errors;
-    const schemaValidationErrorSchema = errorSchema;
-    const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
-    if (hasError) {
-      if (extraErrors) {
-        const merged = validationDataMerge(schemaValidation, extraErrors);
-        errorSchema = merged.errorSchema;
-        errors = merged.errors;
-      }
-      if (focusOnFirstError) {
-        if (typeof focusOnFirstError === "function") {
-          focusOnFirstError(errors[0]);
-        } else {
-          this.focusOnError(errors[0]);
-        }
-      }
-      this.setState(
-        {
-          errors,
-          errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema
-        },
-        () => {
-          if (onError) {
-            onError(errors);
-          } else {
-            console.error("Form validation failed", errors);
-          }
-        }
-      );
-    } else if (prevErrors.length > 0) {
-      this.setState({
-        errors: [],
-        errorSchema: {},
-        schemaValidationErrors: [],
-        schemaValidationErrorSchema: {}
-      });
+    const { omitExtraData } = this.props;
+    let { formData: newFormData } = this.state;
+    if (omitExtraData === true) {
+      newFormData = this.omitExtraData(newFormData);
     }
-    return !hasError;
+    return this.validateFormWithFormData(newFormData);
   }
   /** 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.
@@ -3846,8 +3873,8 @@ var Form = class extends Component5 {
       acceptcharset,
       acceptCharset,
       noHtml5Validate = false,
-      disabled = false,
-      readonly = false,
+      disabled,
+      readonly,
       formContext,
       showErrorList = "top",
       _internalFormWrapper