Make validation controlled and async

WordPress · oandregal · Oct 16, 2025 · Aug 29, 2025 · Oct 15, 2025 · Oct 15, 2025
commit 26b113b1fc20b94ebe37d6e93f77294feaa03399
@@ -6,23 +6,29 @@ import { createContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { NormalizedField } from '../../types';
+import type { NormalizedField, FormValidity } from '../../types';
 
 type DataFormContextType< Item > = {
 	fields: NormalizedField< Item >[];
+	validity?: FormValidity;
 };
 
 const DataFormContext = createContext< DataFormContextType< any > >( {
 	fields: [],
+	validity: undefined,
 } );
 DataFormContext.displayName = 'DataFormContext';
 
 export function DataFormProvider< Item >( {
 	fields,
+	validity,
 	children,
-}: React.PropsWithChildren< { fields: NormalizedField< Item >[] } > ) {
+}: React.PropsWithChildren< {
+	fields: NormalizedField< Item >[];
+	validity?: FormValidity;
+} > ) {
 	return (
-		<DataFormContext.Provider value={ { fields } }>
+		<DataFormContext.Provider value={ { fields, validity } }>
 			{ children }
 		</DataFormContext.Provider>
 	);

@@ -16,6 +16,7 @@ export default function DataForm< Item >( {
 	form,
 	fields,
 	onChange,
+	validity,
 }: DataFormProps< Item > ) {
 	const normalizedFields = useMemo(
 		() => normalizeFields( fields ),
@@ -27,7 +28,7 @@ export default function DataForm< Item >( {
 	}
 
 	return (
-		<DataFormProvider fields={ normalizedFields }>
+		<DataFormProvider fields={ normalizedFields } validity={ validity }>
 			<DataFormLayout data={ data } form={ form } onChange={ onChange } />
 		</DataFormProvider>
 	);

@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { _n, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,18 +17,11 @@ export default function ArrayControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, elements, getValue, setValue } = field;
 	const value = getValue( { item: data } );
 
-	const [ customValidity, setCustomValidity ] = useState<
-		| {
-				type: 'validating' | 'valid' | 'invalid';
-				message: string;
-		  }
-		| undefined
-	>( undefined );
-
 	// Convert stored values to element objects for the token field
 	const arrayValueAsElements = useMemo(
 		() =>
@@ -49,69 +36,6 @@ export default function ArrayControl< Item >( {
 		[ value, elements ]
 	);
 
-	const validateTokens = useCallback(
-		( tokens: ( string | { value: string; label?: string } )[] ) => {
-			// Extract actual values from tokens for validation
-			const tokenValues = tokens.map( ( token ) => {
-				if ( typeof token === 'object' && 'value' in token ) {
-					return token.value;
-				}
-				return token;
-			} );
-
-			// First, check if elements validation is required and any tokens are invalid
-			if ( field.isValid?.elements && elements ) {
-				const invalidTokens = tokenValues.filter( ( tokenValue ) => {
-					return ! elements.some(
-						( element ) => element.value === tokenValue
-					);
-				} );
-
-				if ( invalidTokens.length > 0 ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message: sprintf(
-							/* translators: %s: list of invalid tokens */
-							_n(
-								'Please select from the available options: %s is invalid.',
-								'Please select from the available options: %s are invalid.',
-								invalidTokens.length
-							),
-							invalidTokens.join( ', ' )
-						),
-					} );
-					return;
-				}
-			}
-
-			// Then check custom validation if provided.
-			if ( field.isValid?.custom ) {
-				const result = field.isValid?.custom?.(
-					deepMerge(
-						data,
-						setValue( {
-							item: data,
-							value: tokenValues,
-						} ) as Partial< Item >
-					),
-					field
-				);
-
-				if ( result ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message: result,
-					} );
-					return;
-				}
-			}
-
-			// If no validation errors, clear custom validity
-			setCustomValidity( undefined );
-		},
-		[ elements, data, field, setValue ]
-	);
-
 	const onChangeControl = useCallback(
 		( tokens: ( string | { value: string; label?: string } )[] ) => {
 			const valueTokens = tokens.map( ( token ) => {
@@ -130,8 +54,7 @@ export default function ArrayControl< Item >( {
 	return (
 		<ValidatedFormTokenField
 			required={ !! field.isValid?.required }
-			onValidate={ validateTokens }
-			customValidity={ customValidity }
+			customValidity={ validity?.custom ? validity.custom : undefined }
 			label={ hideLabelFromVision ? undefined : label }
 			value={ arrayValueAsElements }
 			onChange={ onChangeControl }

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,52 +17,20 @@ export default function Checkbox< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, label, description } = field;
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedCheckboxControl
-			>[ 'customValidity' ]
-		>( undefined );
 
 	const onChangeControl = useCallback( () => {
 		onChange(
 			setValue( { item: data, value: ! getValue( { item: data } ) } )
 		);
 	}, [ data, getValue, onChange, setValue ] );
 
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = field.isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: newValue,
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
-
 	return (
 		<ValidatedCheckboxControl
 			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			customValidity={ validity?.custom ? validity.custom : undefined }
 			hidden={ hideLabelFromVision }
 			label={ label }
 			help={ description }

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { colord } from 'colord';
-import deepMerge from 'deepmerge';
 
 /**
  * WordPress dependencies
@@ -12,7 +11,7 @@ import {
 	privateApis,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -75,15 +74,10 @@ export default function Color< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, description, setValue } = field;
 	const value = field.getValue( { item: data } ) || '';
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedInputControl
-			>[ 'customValidity' ]
-		>( undefined );
 
 	const handleColorChange = useCallback(
 		( colorObject: any ) => {
@@ -99,37 +93,10 @@ export default function Color< Item >( {
 		[ data, onChange, setValue ]
 	);
 
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = field.isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: newValue,
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
-
 	return (
 		<ValidatedInputControl
 			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			customValidity={ validity?.custom ? validity.custom : undefined }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value }

@@ -18,6 +18,7 @@ export default function Email< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	return (
 		<ValidatedText
@@ -26,6 +27,7 @@ export default function Email< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				validity,
 				type: 'email',
 				prefix: (
 					<InputControlPrefixWrapper variant="icon">

@@ -16,6 +16,7 @@ export default function Password< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const [ isVisible, setIsVisible ] = useState( false );
 
@@ -30,6 +31,7 @@ export default function Password< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (
 					<Button