Merge pull request #247 from auth0/feat/forms-validations-inconsistency-updates

grandmaester · web-flow · commit 38ee2d99f715 · 2026-04-13T17:29:31.000+05:30
feat: Updated forms validations to use `mode: onTouched` across all components
diff --git a/packages/react/src/components/auth0/my-account/shared/mfa/contact-input-form.tsx b/packages/react/src/components/auth0/my-account/shared/mfa/contact-input-form.tsx
@@ -32,6 +32,7 @@ import { TextField } from '@/components/ui/text-field';
 import { useContactEnrollment } from '@/hooks/my-account/use-contact-enrollment';
 import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { ENTER_CONTACT, ENTER_OTP } from '@/lib/constants/my-account/mfa/mfa-constants';
 import { cn } from '@/lib/utils';
 import type { ContactInputFormProps } from '@/types/my-account/mfa/mfa-types';
@@ -99,8 +100,8 @@ export function ContactInputForm({
 
   const form = useForm<ContactForm>({
     resolver: zodResolver(ContactSchema),
-    mode: 'onTouched',
-    reValidateMode: 'onChange',
+    mode: FORM_VALIDATION_MODE,
+    reValidateMode: FORM_REVALIDATE_MODE,
     defaultValues: { contact: contactData.contact || '' },
   });
 
diff --git a/packages/react/src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx b/packages/react/src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx
@@ -27,6 +27,7 @@ import { OTPField } from '@/components/ui/otp-field';
 import { useOtpConfirmation } from '@/hooks/my-account/use-otp-confirmation';
 import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { OTPVerificationFormProps } from '@/types/my-account/mfa/mfa-types';
 
@@ -122,7 +123,7 @@ export function OTPVerificationForm({
     onClose,
   });
 
-  const form = useForm<OtpForm>({ mode: 'onChange' });
+  const form = useForm<OtpForm>({ mode: FORM_VALIDATION_MODE });
   const userOtp = form.watch('userOtp');
 
   const otpInputRef = React.useRef<HTMLInputElement>(null);
diff --git a/packages/react/src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx b/packages/react/src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx
@@ -23,6 +23,7 @@ import {
 import { Modal } from '@/components/ui/modal';
 import { TextField } from '@/components/ui/text-field';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { DomainCreateModalProps } from '@/types/my-organization/domain-management/domain-create-types';
 
@@ -61,7 +62,7 @@ export function DomainCreateModal({
     defaultValues: {
       domain_url: '',
     },
-    mode: 'onBlur',
+    mode: FORM_VALIDATION_MODE,
   });
 
   const handleCreate = React.useCallback(
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx
@@ -29,6 +29,7 @@ import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { TextField } from '@/components/ui/text-field';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -57,8 +58,8 @@ export const AdfsProviderForm = React.forwardRef<AdfsConfigureFormHandle, AdfsCo
 
     const form = useForm<AdfsConfigureFormValues>({
       resolver: zodResolver(createProviderConfigureSchema('adfs')),
-      mode: 'onSubmit',
-      reValidateMode: 'onChange',
+      mode: FORM_VALIDATION_MODE,
+      reValidateMode: FORM_REVALIDATE_MODE,
       defaultValues: {
         meta_data_source: adfsData?.meta_data_source || 'meta_data_url',
         meta_data_location_url: adfsData?.meta_data_location_url || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx
@@ -27,6 +27,7 @@ import { TextField } from '@/components/ui/text-field';
 import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';
 import { useCoreClient } from '@/hooks/shared/use-core-client';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -71,8 +72,8 @@ export const GoogleAppsProviderForm = React.forwardRef<
 
   const form = useForm<GoogleAppsConfigureFormValues>({
     resolver: zodResolver(createProviderConfigureSchema('google-apps')),
-    mode: 'onSubmit',
-    reValidateMode: 'onChange',
+    mode: FORM_VALIDATION_MODE,
+    reValidateMode: FORM_REVALIDATE_MODE,
     defaultValues: {
       domain: googleAppsData?.domain || '',
       client_id: googleAppsData?.client_id || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx
@@ -28,6 +28,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { TextField } from '@/components/ui/text-field';
 import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -64,8 +65,8 @@ export const OidcProviderForm = React.forwardRef<OidcConfigureFormHandle, OidcCo
 
     const form = useForm<OidcConfigureFormValues>({
       resolver: zodResolver(createProviderConfigureSchema('oidc')),
-      mode: 'onSubmit',
-      reValidateMode: 'onChange',
+      mode: FORM_VALIDATION_MODE,
+      reValidateMode: FORM_REVALIDATE_MODE,
       defaultValues: {
         discovery_url: oidcData?.discovery_url || '',
         type: oidcData?.type || 'back_channel',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx
@@ -28,6 +28,7 @@ import { TextField } from '@/components/ui/text-field';
 import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';
 import { useCoreClient } from '@/hooks/shared/use-core-client';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -76,8 +77,8 @@ export const OktaProviderForm = React.forwardRef<OktaConfigureFormHandle, OktaCo
 
     const form = useForm<OktaConfigureFormValues>({
       resolver: zodResolver(createProviderConfigureSchema('okta')),
-      mode: 'onSubmit',
-      reValidateMode: 'onChange',
+      mode: FORM_VALIDATION_MODE,
+      reValidateMode: FORM_REVALIDATE_MODE,
       defaultValues: {
         domain: oktaData?.domain || '',
         client_id: oktaData?.client_id || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx
@@ -41,6 +41,7 @@ import {
 } from '@/components/ui/select';
 import { TextField } from '@/components/ui/text-field';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -87,8 +88,8 @@ export const PingFederateProviderForm = React.forwardRef<
 
   const form = useForm<PingFederateConfigureFormValues>({
     resolver: zodResolver(createProviderConfigureSchema('pingfederate')),
-    mode: 'onSubmit',
-    reValidateMode: 'onChange',
+    mode: FORM_VALIDATION_MODE,
+    reValidateMode: FORM_REVALIDATE_MODE,
     defaultValues: {
       pingFederateBaseUrl: pingFederateData?.pingFederateBaseUrl || '',
       signingCert: pingFederateData?.signingCert || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx
@@ -43,6 +43,7 @@ import {
 } from '@/components/ui/select';
 import { TextField } from '@/components/ui/text-field';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -92,8 +93,8 @@ export const SamlpProviderForm = React.forwardRef<
 
   const form = useForm<SamlpConfigureFormValues>({
     resolver: zodResolver(createProviderConfigureSchema('samlp')),
-    mode: 'onSubmit',
-    reValidateMode: 'onChange',
+    mode: FORM_VALIDATION_MODE,
+    reValidateMode: FORM_REVALIDATE_MODE,
     defaultValues: {
       meta_data_source: samlpData?.meta_data_source || 'meta_data_url',
       metadataUrl: samlpData?.metadataUrl || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx
@@ -27,6 +27,7 @@ import { TextField } from '@/components/ui/text-field';
 import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';
 import { useCoreClient } from '@/hooks/shared/use-core-client';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';
 
@@ -69,8 +70,8 @@ export const WaadProviderForm = React.forwardRef<WaadConfigureFormHandle, WaadCo
 
     const form = useForm<WaadConfigureFormValues>({
       resolver: zodResolver(createProviderConfigureSchema('waad')),
-      mode: 'onSubmit',
-      reValidateMode: 'onChange',
+      mode: FORM_VALIDATION_MODE,
+      reValidateMode: FORM_REVALIDATE_MODE,
       defaultValues: {
         tenant_domain: waadData?.tenant_domain || '',
         client_id: waadData?.client_id || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/form';
 import { TextField } from '@/components/ui/text-field';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import type {
   ProviderDetailsFormHandle,
   ProviderDetailsProps,
@@ -41,8 +42,8 @@ export const ProviderDetails = React.forwardRef<ProviderDetailsFormHandle, Provi
 
     const form = useForm<ProviderDetailsFormValues>({
       resolver: zodResolver(createProviderDetailsSchema()),
-      mode: 'onSubmit',
-      reValidateMode: 'onChange',
+      mode: FORM_VALIDATION_MODE,
+      reValidateMode: FORM_REVALIDATE_MODE,
       defaultValues: {
         name: initialData?.name || '',
         display_name: initialData?.display_name || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx
@@ -32,6 +32,7 @@ import { TextField } from '@/components/ui/text-field';
 import { useCoreClient } from '@/hooks/shared/use-core-client';
 import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { SsoProvisioningDetailsProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types';
 
@@ -87,6 +88,7 @@ export function SsoProvisioningDetails({
 
   const form = useForm<ProvisioningDetailsFormValues>({
     resolver: zodResolver(ssoProvisioningSchema),
+    mode: FORM_VALIDATION_MODE,
     defaultValues: {
       userIdAttribute: provisioningConfig?.user_id_attribute || '',
       scimEndpointUrl: scimEndpointUrl || '',
diff --git a/packages/react/src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx b/packages/react/src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx
@@ -26,6 +26,7 @@ import { Separator } from '@/components/ui/separator';
 import { Spinner } from '@/components/ui/spinner';
 import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 import { cn } from '@/lib/utils';
 import type { OrganizationDetailsProps } from '@/types/my-organization/organization-management/organization-details-types';
 
@@ -114,6 +115,7 @@ export function OrganizationDetails({
 
   const form = useForm<OrganizationDetailsFormValues>({
     resolver: zodResolver(organizationDetailSchema),
+    mode: FORM_VALIDATION_MODE,
     defaultValues: formValues,
     values: formValues,
   });
diff --git a/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/enrollment-form.tsx b/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/enrollment-form.tsx
@@ -48,6 +48,7 @@ import { Spinner } from '@/components/ui/spinner';
 import { TextField } from '@/components/ui/text-field';
 import { useMfaStepUp } from '@/hooks/shared/use-mfa-step-up';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 
 interface EnrollmentFormProps {
   error: MfaRequiredError;
@@ -107,7 +108,7 @@ export function EnrollmentForm({ error, factor, onComplete, onCancel }: Enrollme
 
   const inputForm = useForm<ContactForm>({
     resolver: zodResolver(contactSchema),
-    mode: 'onChange',
+    mode: FORM_VALIDATION_MODE,
   });
 
   // OTP only: call enroll on mount then show QR.
diff --git a/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/otp-code-form.tsx b/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/otp-code-form.tsx
@@ -12,6 +12,7 @@ import { Separator } from '@/components/ui/separator';
 import { Spinner } from '@/components/ui/spinner';
 import { TextField } from '@/components/ui/text-field';
 import { useTranslator } from '@/hooks/shared/use-translator';
+import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';
 
 interface Authenticator {
   authenticatorType?: string;
@@ -54,7 +55,7 @@ export function OtpCodeForm({
 
   const isRecoveryCode = authenticator?.authenticatorType === FACTOR_TYPE_RECOVERY_CODE;
 
-  const form = useForm<CodeForm>({ mode: 'onChange' });
+  const form = useForm<CodeForm>({ mode: FORM_VALIDATION_MODE });
   const code = form.watch('code');
   const inputRef = useRef<HTMLInputElement>(null);
 
diff --git a/packages/react/src/lib/constants/form-constants.ts b/packages/react/src/lib/constants/form-constants.ts
@@ -0,0 +1,7 @@
+/**
+ * Form constants used across the components.
+ * @internal
+ */
+
+export const FORM_VALIDATION_MODE = 'onTouched';
+export const FORM_REVALIDATE_MODE = 'onChange';
