Put in needsValidating toggle

Author: Shelob9

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

@@ -7,16 +7,23 @@ import {
 const useValidation = ( defaultRules = [], value, fieldName, strokeKey ) => {
 	const [ validationRules, setValidationRules ] = useState( defaultRules );
 
+	//Validation messages for this field
 	const validationMessages = useSelect( ( select ) => {
 		const currentMessages = select( strokeKey ).getValidationMessages();
-		//has fieldName ?
+		//Return for this field
 		if ( currentMessages.hasOwnProperty( fieldName ) ) {
 			return currentMessages[ fieldName ];
 		}
 		return [];
 	}, [ fieldName ] );
 
+	//Set validation messages for this field
 	const { setValidationMessages } = useDispatch( strokeKey );
+	const needsValidation = useSelect( ( select ) => {
+		return select( strokeKey ).getNeedsValidating();
+	}, [] );
+
+	const toggleNeedsValidating = useDispatch( strokeKey ).toggleNeedsValidating();
 
 	useEffect( () => {
 		const newMessages = [];
@@ -35,7 +42,10 @@ const useValidation = ( defaultRules = [], value, fieldName, strokeKey ) => {
 			}
 		} );
 		setValidationMessages( fieldName, newMessages );
-	}, [ value ] );
+		if ( needsValidation ) {
+			toggleNeedsValidating();
+		}
+	}, [ value, validationRules, needsValidation, toggleNeedsValidating, setValidationMessages ] );
 
 	const addValidationRules = ( rules = [] ) => {
 		rules.forEach( ( rule ) => {

ui/js/dfv/src/pods-dfv.js

@@ -610,9 +610,8 @@ window.PodsDFV = {
 	 *
 	 * @returns {string[]} Array of validation messages
 	 */
-	checkValidation(pod, itemId, formCounter) {
+	checkValidation( pod, itemId, formCounter ) {
 		let messages = [];
-
 		return messages;
 	},
 
@@ -625,8 +624,8 @@ window.PodsDFV = {
 	 *
 	 * @returns {boolean} True if valid, false if not.
 	*/
-	isValid(pod, itemId, formCounter) {
-		const errors = this.checkValidation(pod, itemId, formCounter);
+	isValid( pod, itemId, formCounter ) {
+		const errors = this.checkValidation( pod, itemId, formCounter );
 		return !errors.length;
 	},
 	/**
@@ -784,7 +783,6 @@ window.PodsDFV = {
 		// Create stores for each of the individual keys we found (the keys of
 		// the initialStoresWithValues object).
 		const initialStoreKeys = Object.keys(initialStoresWithValues);
-
 		const storeKeys = initialStoreKeys.map((storeKey) => {
 			// The Edit Pod screen gets a different store set up than
 			// other contexts.
@@ -793,12 +791,16 @@ window.PodsDFV = {
 					window.podsAdminConfig,
 					storeKey
 				);
-			} else if (window.podsDFVConfig) {
+			} else if ( window.podsDFVConfig ) {
+				const validationMessages = Object.keys(initialStoresWithValues[storeKey]).reduce((acc, key) => {
+					acc[ key ] = [];
+					return acc;
+				}, {} );
 				return initPodStore(
 					window.podsDFVConfig,
 					{
-						...initialStoresWithValues[ storeKey ],
-						validationMessages: [],
+						...initialStoresWithValues[storeKey],
+						validationMessages,
 						needsValidation: false,
 					},
 					storeKey,

ui/js/dfv/src/store/selectors.js

@@ -44,7 +44,7 @@ export const getPodOption = ( state, key ) => CURRENT_POD.getFrom( state )[ key
 
 //Get all validation messages
 export const getValidationMessages = ( state ) => CURRENT_POD.getFrom( state ).validationMessages;
-export const getNeedsValidating = ( state ) => CURRENT_POD.getFrom( state ).needsValidating;
+export const getNeedsValidating = ( state ) => CURRENT_POD.getFrom( state ).needsValidation;
 //-- Pod Groups
 export const getGroups = ( state ) => GROUPS.getFrom( state );