diff --git a/src/components/Form.js b/src/components/Form.js index a45c6d769d57..c7c778168274 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -113,12 +113,14 @@ function Form(props) { const {validate, onSubmit, children} = props; + const hasServerError = useMemo(() => Boolean(props.formState) && !_.isEmpty(props.formState.errors), [props.formState]); + /** * @param {Object} values - An object containing the value of each inputID, e.g. {inputID1: value1, inputID2: value2} * @returns {Object} - An object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2} */ const onValidate = useCallback( - (values) => { + (values, shouldClearServerError = true) => { const trimmedStringValues = {}; _.each(values, (inputValue, inputID) => { if (_.isString(inputValue)) { @@ -128,7 +130,9 @@ function Form(props) { } }); - FormActions.setErrors(props.formID, null); + if (shouldClearServerError) { + FormActions.setErrors(props.formID, null); + } FormActions.setErrorFields(props.formID, null); // Run any validations passed as a prop @@ -321,7 +325,7 @@ function Form(props) { setTimeout(() => { setTouchedInput(inputID); if (props.shouldValidateOnBlur) { - onValidate(inputValues); + onValidate(inputValues, !hasServerError); } }, 200); } @@ -365,7 +369,19 @@ function Form(props) { return childrenElements; }, - [errors, inputRefs, inputValues, onValidate, props.draftValues, props.formID, props.formState, setTouchedInput, props.shouldValidateOnBlur, props.shouldValidateOnChange], + [ + errors, + inputRefs, + inputValues, + onValidate, + props.draftValues, + props.formID, + props.formState, + setTouchedInput, + props.shouldValidateOnBlur, + props.shouldValidateOnChange, + hasServerError, + ], ); const scrollViewContent = useCallback(