diff --git a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx index f3bfe6fab..773881c68 100644 --- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx +++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx @@ -2,7 +2,7 @@ import { useApolloClient, useMutation } from "@apollo/client/react"; import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react"; import { Button, Checkbox, Form, Modal, Space } from "antd"; import _ from "lodash"; -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -53,6 +53,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop, const client = useApolloClient(); const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false); const notification = useNotification(); + const formTopRef = useRef(null); const { treatments: { Enhanced_Payroll, Imgproxy } @@ -447,13 +448,21 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop, autoComplete={"off"} layout="vertical" form={form} - onFinishFailed={() => { + onFinishFailed={(errorInfo) => { setEnterAgain(false); + // Scroll to the top of the form to show validation errors + if (errorInfo.errorFields && errorInfo.errorFields.length > 0) { + setTimeout(() => { + formTopRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); + }, 100); + } }} > - - - +
+ + + +
); diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx index 56f4a5881..0f265d7db 100644 --- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx +++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx @@ -39,11 +39,13 @@ export default function FormsFieldChanged({ form, skipPrompt }) { {errors.length > 0 && ( } + showIcon /> )} diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 626ab5e4c..e0659a985 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -1367,6 +1367,7 @@ "unknown": "Unknown", "unsavedchanges": "Unsaved changes.", "username": "Username", + "validationerror": "Please fix the following errors:", "view": "View", "wednesday": "Wednesday", "yes": "Yes" diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 664c5081c..1e7663798 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -1367,6 +1367,7 @@ "unknown": "Desconocido", "unsavedchanges": "", "username": "", + "validationerror": "", "view": "", "wednesday": "", "yes": "" diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 67a14d5ff..1d2fdfb5a 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -1367,6 +1367,7 @@ "unknown": "Inconnu", "unsavedchanges": "", "username": "", + "validationerror": "", "view": "", "wednesday": "", "yes": ""