@rjsf/core 5.18.5 → 5.18.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/core.umd.js CHANGED
@@ -3030,9 +3030,22 @@
3030
3030
  };
3031
3031
  return getAllPaths(pathSchema);
3032
3032
  };
3033
+ /** Returns the `formData` after filtering to remove any extra data not in a form field
3034
+ *
3035
+ * @param formData - The data for the `Form`
3036
+ * @returns The `formData` after omitting extra data
3037
+ */
3038
+ this.omitExtraData = (formData) => {
3039
+ const { schema, schemaUtils } = this.state;
3040
+ const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
3041
+ const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
3042
+ const fieldNames = this.getFieldNames(pathSchema, formData);
3043
+ const newFormData = this.getUsedFormData(formData, fieldNames);
3044
+ return newFormData;
3045
+ };
3033
3046
  /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
3034
3047
  * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
3035
- * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
3048
+ * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
3036
3049
  * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
3037
3050
  * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
3038
3051
  * callback will be called if specified with the updated state.
@@ -3051,12 +3064,8 @@
3051
3064
  const mustValidate = !noValidate && liveValidate;
3052
3065
  let state = { formData, schema };
3053
3066
  let newFormData = formData;
3054
- let _retrievedSchema;
3055
3067
  if (omitExtraData === true && liveOmit === true) {
3056
- _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
3057
- const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
3058
- const fieldNames = this.getFieldNames(pathSchema, formData);
3059
- newFormData = this.getUsedFormData(formData, fieldNames);
3068
+ newFormData = this.omitExtraData(formData);
3060
3069
  state = {
3061
3070
  formData: newFormData
3062
3071
  };
@@ -3087,9 +3096,6 @@
3087
3096
  errors: utils.toErrorList(errorSchema)
3088
3097
  };
3089
3098
  }
3090
- if (_retrievedSchema) {
3091
- state.retrievedSchema = _retrievedSchema;
3092
- }
3093
3099
  this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
3094
3100
  };
3095
3101
  /**
@@ -3151,14 +3157,10 @@
3151
3157
  event.persist();
3152
3158
  const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
3153
3159
  let { formData: newFormData } = this.state;
3154
- const { schema, schemaUtils } = this.state;
3155
3160
  if (omitExtraData === true) {
3156
- const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
3157
- const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
3158
- const fieldNames = this.getFieldNames(pathSchema, newFormData);
3159
- newFormData = this.getUsedFormData(newFormData, fieldNames);
3161
+ newFormData = this.omitExtraData(newFormData);
3160
3162
  }
3161
- if (noValidate || this.validateForm()) {
3163
+ if (noValidate || this.validateFormWithFormData(newFormData)) {
3162
3164
  const errorSchema = extraErrors || {};
3163
3165
  const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
3164
3166
  this.setState(
@@ -3188,6 +3190,59 @@
3188
3190
  this.formElement.current.requestSubmit();
3189
3191
  }
3190
3192
  };
3193
+ /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
3194
+ * If `onError` is provided, then it will be called with the list of errors.
3195
+ *
3196
+ * @param formData - The form data to validate
3197
+ * @returns - True if the form is valid, false otherwise.
3198
+ */
3199
+ this.validateFormWithFormData = (formData) => {
3200
+ const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
3201
+ const { errors: prevErrors } = this.state;
3202
+ const schemaValidation = this.validate(formData);
3203
+ let errors = schemaValidation.errors;
3204
+ let errorSchema = schemaValidation.errorSchema;
3205
+ const schemaValidationErrors = errors;
3206
+ const schemaValidationErrorSchema = errorSchema;
3207
+ const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
3208
+ if (hasError) {
3209
+ if (extraErrors) {
3210
+ const merged = utils.validationDataMerge(schemaValidation, extraErrors);
3211
+ errorSchema = merged.errorSchema;
3212
+ errors = merged.errors;
3213
+ }
3214
+ if (focusOnFirstError) {
3215
+ if (typeof focusOnFirstError === "function") {
3216
+ focusOnFirstError(errors[0]);
3217
+ } else {
3218
+ this.focusOnError(errors[0]);
3219
+ }
3220
+ }
3221
+ this.setState(
3222
+ {
3223
+ errors,
3224
+ errorSchema,
3225
+ schemaValidationErrors,
3226
+ schemaValidationErrorSchema
3227
+ },
3228
+ () => {
3229
+ if (onError) {
3230
+ onError(errors);
3231
+ } else {
3232
+ console.error("Form validation failed", errors);
3233
+ }
3234
+ }
3235
+ );
3236
+ } else if (prevErrors.length > 0) {
3237
+ this.setState({
3238
+ errors: [],
3239
+ errorSchema: {},
3240
+ schemaValidationErrors: [],
3241
+ schemaValidationErrorSchema: {}
3242
+ });
3243
+ }
3244
+ return !hasError;
3245
+ };
3191
3246
  if (!props.validator) {
3192
3247
  throw new Error("A validator is required for Form functionality to work");
3193
3248
  }
@@ -3431,57 +3486,19 @@
3431
3486
  field.focus();
3432
3487
  }
3433
3488
  }
3434
- /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
3489
+ /** Programmatically validate the form. If `omitExtraData` is true, the `formData` will first be filtered to remove
3490
+ * any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
3435
3491
  * same way as would happen on form submission.
3436
3492
  *
3437
3493
  * @returns - True if the form is valid, false otherwise.
3438
3494
  */
3439
3495
  validateForm() {
3440
- const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
3441
- const { formData, errors: prevErrors } = this.state;
3442
- const schemaValidation = this.validate(formData);
3443
- let errors = schemaValidation.errors;
3444
- let errorSchema = schemaValidation.errorSchema;
3445
- const schemaValidationErrors = errors;
3446
- const schemaValidationErrorSchema = errorSchema;
3447
- const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
3448
- if (hasError) {
3449
- if (extraErrors) {
3450
- const merged = utils.validationDataMerge(schemaValidation, extraErrors);
3451
- errorSchema = merged.errorSchema;
3452
- errors = merged.errors;
3453
- }
3454
- if (focusOnFirstError) {
3455
- if (typeof focusOnFirstError === "function") {
3456
- focusOnFirstError(errors[0]);
3457
- } else {
3458
- this.focusOnError(errors[0]);
3459
- }
3460
- }
3461
- this.setState(
3462
- {
3463
- errors,
3464
- errorSchema,
3465
- schemaValidationErrors,
3466
- schemaValidationErrorSchema
3467
- },
3468
- () => {
3469
- if (onError) {
3470
- onError(errors);
3471
- } else {
3472
- console.error("Form validation failed", errors);
3473
- }
3474
- }
3475
- );
3476
- } else if (prevErrors.length > 0) {
3477
- this.setState({
3478
- errors: [],
3479
- errorSchema: {},
3480
- schemaValidationErrors: [],
3481
- schemaValidationErrorSchema: {}
3482
- });
3496
+ const { omitExtraData } = this.props;
3497
+ let { formData: newFormData } = this.state;
3498
+ if (omitExtraData === true) {
3499
+ newFormData = this.omitExtraData(newFormData);
3483
3500
  }
3484
- return !hasError;
3501
+ return this.validateFormWithFormData(newFormData);
3485
3502
  }
3486
3503
  /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
3487
3504
  * needed along with the submit button or any children of the form.
package/dist/index.esm.js CHANGED
@@ -3379,9 +3379,22 @@ var Form = class extends Component5 {
3379
3379
  };
3380
3380
  return getAllPaths(pathSchema);
3381
3381
  };
3382
+ /** Returns the `formData` after filtering to remove any extra data not in a form field
3383
+ *
3384
+ * @param formData - The data for the `Form`
3385
+ * @returns The `formData` after omitting extra data
3386
+ */
3387
+ this.omitExtraData = (formData) => {
3388
+ const { schema, schemaUtils } = this.state;
3389
+ const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
3390
+ const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
3391
+ const fieldNames = this.getFieldNames(pathSchema, formData);
3392
+ const newFormData = this.getUsedFormData(formData, fieldNames);
3393
+ return newFormData;
3394
+ };
3382
3395
  /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
3383
3396
  * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
3384
- * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
3397
+ * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
3385
3398
  * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
3386
3399
  * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
3387
3400
  * callback will be called if specified with the updated state.
@@ -3402,10 +3415,7 @@ var Form = class extends Component5 {
3402
3415
  let newFormData = formData;
3403
3416
  let _retrievedSchema;
3404
3417
  if (omitExtraData === true && liveOmit === true) {
3405
- _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
3406
- const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
3407
- const fieldNames = this.getFieldNames(pathSchema, formData);
3408
- newFormData = this.getUsedFormData(formData, fieldNames);
3418
+ newFormData = this.omitExtraData(formData);
3409
3419
  state = {
3410
3420
  formData: newFormData
3411
3421
  };
@@ -3500,14 +3510,10 @@ var Form = class extends Component5 {
3500
3510
  event.persist();
3501
3511
  const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
3502
3512
  let { formData: newFormData } = this.state;
3503
- const { schema, schemaUtils } = this.state;
3504
3513
  if (omitExtraData === true) {
3505
- const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
3506
- const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
3507
- const fieldNames = this.getFieldNames(pathSchema, newFormData);
3508
- newFormData = this.getUsedFormData(newFormData, fieldNames);
3514
+ newFormData = this.omitExtraData(newFormData);
3509
3515
  }
3510
- if (noValidate || this.validateForm()) {
3516
+ if (noValidate || this.validateFormWithFormData(newFormData)) {
3511
3517
  const errorSchema = extraErrors || {};
3512
3518
  const errors = extraErrors ? toErrorList(extraErrors) : [];
3513
3519
  this.setState(
@@ -3537,6 +3543,59 @@ var Form = class extends Component5 {
3537
3543
  this.formElement.current.requestSubmit();
3538
3544
  }
3539
3545
  };
3546
+ /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
3547
+ * If `onError` is provided, then it will be called with the list of errors.
3548
+ *
3549
+ * @param formData - The form data to validate
3550
+ * @returns - True if the form is valid, false otherwise.
3551
+ */
3552
+ this.validateFormWithFormData = (formData) => {
3553
+ const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
3554
+ const { errors: prevErrors } = this.state;
3555
+ const schemaValidation = this.validate(formData);
3556
+ let errors = schemaValidation.errors;
3557
+ let errorSchema = schemaValidation.errorSchema;
3558
+ const schemaValidationErrors = errors;
3559
+ const schemaValidationErrorSchema = errorSchema;
3560
+ const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
3561
+ if (hasError) {
3562
+ if (extraErrors) {
3563
+ const merged = validationDataMerge(schemaValidation, extraErrors);
3564
+ errorSchema = merged.errorSchema;
3565
+ errors = merged.errors;
3566
+ }
3567
+ if (focusOnFirstError) {
3568
+ if (typeof focusOnFirstError === "function") {
3569
+ focusOnFirstError(errors[0]);
3570
+ } else {
3571
+ this.focusOnError(errors[0]);
3572
+ }
3573
+ }
3574
+ this.setState(
3575
+ {
3576
+ errors,
3577
+ errorSchema,
3578
+ schemaValidationErrors,
3579
+ schemaValidationErrorSchema
3580
+ },
3581
+ () => {
3582
+ if (onError) {
3583
+ onError(errors);
3584
+ } else {
3585
+ console.error("Form validation failed", errors);
3586
+ }
3587
+ }
3588
+ );
3589
+ } else if (prevErrors.length > 0) {
3590
+ this.setState({
3591
+ errors: [],
3592
+ errorSchema: {},
3593
+ schemaValidationErrors: [],
3594
+ schemaValidationErrorSchema: {}
3595
+ });
3596
+ }
3597
+ return !hasError;
3598
+ };
3540
3599
  if (!props.validator) {
3541
3600
  throw new Error("A validator is required for Form functionality to work");
3542
3601
  }
@@ -3780,57 +3839,19 @@ var Form = class extends Component5 {
3780
3839
  field.focus();
3781
3840
  }
3782
3841
  }
3783
- /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
3842
+ /** Programmatically validate the form. If `omitExtraData` is true, the `formData` will first be filtered to remove
3843
+ * any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
3784
3844
  * same way as would happen on form submission.
3785
3845
  *
3786
3846
  * @returns - True if the form is valid, false otherwise.
3787
3847
  */
3788
3848
  validateForm() {
3789
- const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
3790
- const { formData, errors: prevErrors } = this.state;
3791
- const schemaValidation = this.validate(formData);
3792
- let errors = schemaValidation.errors;
3793
- let errorSchema = schemaValidation.errorSchema;
3794
- const schemaValidationErrors = errors;
3795
- const schemaValidationErrorSchema = errorSchema;
3796
- const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
3797
- if (hasError) {
3798
- if (extraErrors) {
3799
- const merged = validationDataMerge(schemaValidation, extraErrors);
3800
- errorSchema = merged.errorSchema;
3801
- errors = merged.errors;
3802
- }
3803
- if (focusOnFirstError) {
3804
- if (typeof focusOnFirstError === "function") {
3805
- focusOnFirstError(errors[0]);
3806
- } else {
3807
- this.focusOnError(errors[0]);
3808
- }
3809
- }
3810
- this.setState(
3811
- {
3812
- errors,
3813
- errorSchema,
3814
- schemaValidationErrors,
3815
- schemaValidationErrorSchema
3816
- },
3817
- () => {
3818
- if (onError) {
3819
- onError(errors);
3820
- } else {
3821
- console.error("Form validation failed", errors);
3822
- }
3823
- }
3824
- );
3825
- } else if (prevErrors.length > 0) {
3826
- this.setState({
3827
- errors: [],
3828
- errorSchema: {},
3829
- schemaValidationErrors: [],
3830
- schemaValidationErrorSchema: {}
3831
- });
3849
+ const { omitExtraData } = this.props;
3850
+ let { formData: newFormData } = this.state;
3851
+ if (omitExtraData === true) {
3852
+ newFormData = this.omitExtraData(newFormData);
3832
3853
  }
3833
- return !hasError;
3854
+ return this.validateFormWithFormData(newFormData);
3834
3855
  }
3835
3856
  /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
3836
3857
  * needed along with the submit button or any children of the form.