Add checkValidation and isValid methods to window.podsDFV

ui/js/dfv/src/components/connected-field-wrapper.js

@@ -43,6 +43,7 @@ const ConnectedFieldWrapper = compose( [
 		return {
 			...valueData,
 			allPodValues,
+			storeKey,
 		};
 	} ),
 	withDispatch( ( storeDispatch, ownProps ) => {

ui/js/dfv/src/components/field-wrapper/index.js

@@ -48,6 +48,7 @@ export const FieldWrapper = ( props ) => {
 		values,
 		setOptionValue,
 		allPodValues,
+		storeKey,
 	} = props;
 
 	const {
@@ -139,7 +140,9 @@ export const FieldWrapper = ( props ) => {
 				condition: () => true === toBool( required ),
 			},
 		],
-		value
+		value,
+		name,
+		storeKey
 	);
 
 	// Don't render a field that hasn't had its dependencies met.

ui/js/dfv/src/components/field-wrapper/subfield-wrapper.js

@@ -69,7 +69,8 @@ const SubfieldWrapper = ( {
 	// Subfields get their own set of validation rules
 	const [ validationMessages, addValidationRules ] = useValidation(
 		[],
-		value
+		value,
+		subfieldConfig.name
 	);
 
 	// Set up useSortable hook

ui/js/dfv/src/components/validation-messages.js

@@ -12,7 +12,7 @@ const ValidationMessages = ( { messages } ) => {
 		<div className="pods-validation-messages">
 			{ messages.map( ( message ) => (
 				<Notice
-					key="message"
+					key={ message }
 					status="error"
 					isDismissible={ false }
 					politeness="polite"

ui/js/dfv/src/hooks/useValidation.js

@@ -1,8 +1,29 @@
 import { useState, useEffect } from 'react';
+import {
+	useSelect,
+	useDispatch,
+} from '@wordpress/data';
 
-const useValidation = ( defaultRules = [], value ) => {
+const useValidation = ( defaultRules = [], value, fieldName, storeKey ) => {
 	const [ validationRules, setValidationRules ] = useState( defaultRules );
-	const [ validationMessages, setValidationMessages ] = useState( [] );
+
+	//Validation messages for this field
+	const validationMessages = useSelect( ( select ) => {
+		const currentMessages = select( storeKey ).getValidationMessages();
+		//Return for this field
+		if ( currentMessages.hasOwnProperty( fieldName ) ) {
+			return currentMessages[ fieldName ];
+		}
+		return [];
+	}, [ fieldName ] );
+
+	//Set validation messages for this field
+	const { setValidationMessages } = useDispatch( storeKey );
+	const needsValidation = useSelect( ( select ) => {
+		return select( storeKey ).getNeedsValidating();
+	}, [] );
+
+	const toggleNeedsValidating = useDispatch( storeKey ).toggleNeedsValidating();
 
 	useEffect( () => {
 		const newMessages = [];
@@ -20,9 +41,11 @@ const useValidation = ( defaultRules = [], value ) => {
 				}
 			}
 		} );
-
-		setValidationMessages( newMessages );
-	}, [ value ] );
+		setValidationMessages( fieldName, newMessages );
+		if ( needsValidation ) {
+			toggleNeedsValidating();
+		}
+	}, [ value, validationRules, needsValidation, toggleNeedsValidating, setValidationMessages ] );
 
 	const addValidationRules = ( rules = [] ) => {
 		rules.forEach( ( rule ) => {
@@ -34,7 +57,6 @@ const useValidation = ( defaultRules = [], value ) => {
 			} );
 		} );
 	};
-
 	return [
 		validationMessages,
 		addValidationRules,