Currently, I am facing a challenge with form validation that needs to be triggered on submit. The issue arises as some of the validation logic is located in a separate child component and is triggered through a useEffect dependency from the parent component using setTriggerValidation. Here is an outline of the scenario:
Within the submitAction, it is necessary for me to verify if isSectionValid in the parent component before proceeding with the actual submission process. This value is stored in the context that encapsulates my components and gets updated by the child component, which contains the specific fields and validation logic.
//
parent
const triggerSectionValidation = () => {
setTriggerValidation(true)
}
const submitAction = () => {
// check if section is valid
// submit form data only if the above flag is valid
}
<form onSubmit={submitAction} />
// child
useEffect(() => {
// validate
setIsSectionValid(true|false)
}, [triggerValidation])
// render component
The challenge I am encountering is that I cannot initiate the validation process within submitAction because the child's useEffect would be queued after the submission has been executed. Therefore, I need to trigger it prior to submitting the form. Wrapping setTriggerValidation and submitAction under the onSubmit event poses similar issues, and attempting different events on the submit button does not yield desired results. Do you believe there is a solution to this problem, or is it indicative of poor design?