react-hook-form 7.71.1 → 7.72.0

package/dist/index.esm.mjs

@@ -105,6 +105,9 @@ const EVENTS = {
     BLUR: 'blur',
     FOCUS_OUT: 'focusout',
     CHANGE: 'change',
+    SUBMIT: 'submit',
+    TRIGGER: 'trigger',
+    VALID: 'valid',
 };
 const VALIDATION_MODE = {
     onBlur: 'onBlur',
@@ -122,6 +125,8 @@ const INPUT_VALIDATION_RULES = {
     required: 'required',
     validate: 'validate',
 };
+const FORM_ERROR_TYPE = 'form';
+const ROOT_ERROR_TYPE = 'root';
 
 /**
  * Separate context for `control` to prevent unnecessary rerenders.
@@ -1167,7 +1172,7 @@ var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(re
 
 var updateFieldArrayRootError = (errors, error, name) => {
     const fieldArrayErrors = convertToArrayPayload(get(errors, name));
-    set(fieldArrayErrors, 'root', error[name]);
+    set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
     set(errors, name, fieldArrayErrors);
     return errors;
 };
@@ -1456,7 +1461,11 @@ function createFormControl(props = {}) {
                 _updateIsValidating();
             }
             else {
-                isValid = await executeBuiltInValidation(_fields, true);
+                isValid = await executeBuiltInValidation({
+                    fields: _fields,
+                    onlyCheckValid: true,
+                    eventType: EVENTS.VALID,
+                });
             }
             if (isValid !== _formState.isValid) {
                 _subjects.state.next({
@@ -1505,7 +1514,9 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+                const fullDirtyFields = getDirtyFields(_defaultValues, _formValues);
+                const rootName = getNodeParentName(name);
+                set(_formState.dirtyFields, rootName, get(fullDirtyFields, rootName));
             }
             _subjects.state.next({
                 name,
@@ -1619,8 +1630,7 @@ function createFormControl(props = {}) {
     };
     const _runSchema = async (name) => {
         _updateIsValidating(name, true);
-        const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-        return result;
+        return await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     };
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _runSchema(names);
@@ -1638,9 +1648,55 @@ function createFormControl(props = {}) {
         }
         return errors;
     };
-    const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
+    const validateForm = async ({ name, eventType, }) => {
+        if (props.validate) {
+            const result = await props.validate({
+                formValues: _formValues,
+                formState: _formState,
+                name,
+                eventType,
+            });
+            if (isObject(result)) {
+                for (const key in result) {
+                    const error = result[key];
+                    if (error) {
+                        setError(`${FORM_ERROR_TYPE}.${key}`, {
+                            message: isString(result.message) ? result.message : '',
+                            type: INPUT_VALIDATION_RULES.validate,
+                        });
+                    }
+                }
+            }
+            else if (isString(result) || !result) {
+                setError(FORM_ERROR_TYPE, {
+                    message: result || '',
+                    type: INPUT_VALIDATION_RULES.validate,
+                });
+            }
+            else {
+                clearErrors(FORM_ERROR_TYPE);
+            }
+            return result;
+        }
+        return true;
+    };
+    const executeBuiltInValidation = async ({ fields, onlyCheckValid, name, eventType, context = {
         valid: true,
-    }) => {
+        runRootValidation: false,
+    }, }) => {
+        if (props.validate) {
+            context.runRootValidation = true;
+            const result = await validateForm({
+                name,
+                eventType,
+            });
+            if (!result) {
+                context.valid = false;
+                if (onlyCheckValid) {
+                    return context.valid;
+                }
+            }
+        }
         for (const name in fields) {
             const field = fields[name];
             if (field) {
@@ -1651,25 +1707,34 @@ function createFormControl(props = {}) {
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([_f.name], true);
                     }
-                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !onlyCheckValid, isFieldArrayRoot);
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([_f.name]);
                     }
                     if (fieldError[_f.name]) {
                         context.valid = false;
-                        if (shouldOnlyCheckValid || props.shouldUseNativeValidation) {
+                        if (onlyCheckValid) {
                             break;
                         }
                     }
-                    !shouldOnlyCheckValid &&
+                    !onlyCheckValid &&
                         (get(fieldError, _f.name)
                             ? isFieldArrayRoot
                                 ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name)
                                 : set(_formState.errors, _f.name, fieldError[_f.name])
                             : unset(_formState.errors, _f.name));
+                    if (props.shouldUseNativeValidation && fieldError[_f.name]) {
+                        break;
+                    }
                 }
                 !isEmptyObject(fieldValue) &&
-                    (await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context));
+                    (await executeBuiltInValidation({
+                        context,
+                        onlyCheckValid,
+                        fields: fieldValue,
+                        name: name,
+                        eventType,
+                    }));
             }
         }
         return context.valid;
@@ -1828,6 +1893,7 @@ function createFormControl(props = {}) {
                 : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
+                !props.validate &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
@@ -1865,6 +1931,12 @@ function createFormControl(props = {}) {
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
+            if (!_options.resolver && props.validate) {
+                await validateForm({
+                    name: name,
+                    eventType: event.type,
+                });
+            }
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             if (_options.resolver) {
                 const { errors } = await _runSchema([name]);
@@ -1889,7 +1961,12 @@ function createFormControl(props = {}) {
                     }
                     else if (_proxyFormState.isValid ||
                         _proxySubscribeFormState.isValid) {
-                        isValid = await executeBuiltInValidation(_fields, true);
+                        isValid = await executeBuiltInValidation({
+                            fields: _fields,
+                            onlyCheckValid: true,
+                            name: name,
+                            eventType: event.type,
+                        });
                     }
                 }
             }
@@ -1922,12 +1999,19 @@ function createFormControl(props = {}) {
         else if (name) {
             validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
                 const field = get(_fields, fieldName);
-                return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
+                return await executeBuiltInValidation({
+                    fields: field && field._f ? { [fieldName]: field } : field,
+                    eventType: EVENTS.TRIGGER,
+                });
             }))).every(Boolean);
             !(!validationResult && !_formState.isValid) && _setValid();
         }
         else {
-            validationResult = isValid = await executeBuiltInValidation(_fields);
+            validationResult = isValid = await executeBuiltInValidation({
+                fields: _fields,
+                name,
+                eventType: EVENTS.TRIGGER,
+            });
         }
         _subjects.state.next({
             ...(!isString(name) ||
@@ -1964,11 +2048,24 @@ function createFormControl(props = {}) {
         isTouched: !!get((formState || _formState).touchedFields, name),
     });
     const clearErrors = (name) => {
-        name &&
-            convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
-        _subjects.state.next({
-            errors: name ? _formState.errors : {},
-        });
+        const names = name ? convertToArrayPayload(name) : undefined;
+        names === null || names === void 0 ? void 0 : names.forEach((inputName) => unset(_formState.errors, inputName));
+        if (names) {
+            // Emit for each cleared field with the field name so that
+            // shouldSubscribeByName can filter and avoid broad re-renders
+            names.forEach((inputName) => {
+                _subjects.state.next({
+                    name: inputName,
+                    errors: _formState.errors,
+                });
+            });
+        }
+        else {
+            // Clear all errors - emit without name to notify all subscribers
+            _subjects.state.next({
+                errors: {},
+            });
+        }
     };
     const setError = (name, error, options) => {
         const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
@@ -2179,14 +2276,17 @@ function createFormControl(props = {}) {
             fieldValues = cloneObject(values);
         }
         else {
-            await executeBuiltInValidation(_fields);
+            await executeBuiltInValidation({
+                fields: _fields,
+                eventType: EVENTS.SUBMIT,
+            });
         }
         if (_names.disabled.size) {
             for (const name of _names.disabled) {
                 unset(fieldValues, name);
             }
         }
-        unset(_formState.errors, 'root');
+        unset(_formState.errors, ROOT_ERROR_TYPE);
         if (isEmptyObject(_formState.errors)) {
             _subjects.state.next({
                 errors: {},