diff --git a/src/Form.jsx b/src/Form.jsx
index 677ca76..11d8e84 100644
--- a/src/Form.jsx
+++ b/src/Form.jsx
@@ -138,6 +138,25 @@ function Form() {
},
];
+ const focusField = (fieldName) => {
+ document.getElementById(fieldName).focus();
+ };
+
+ const getBorderColor = (fieldName) => {
+ try {
+ switch (messages[fieldName].status) {
+ case 'ERROR':
+ return 'red';
+ case 'WARNING':
+ return 'orange';
+ default:
+ return 'black';
+ }
+ } catch {
+ return 'black';
+ }
+ };
+
const handleBlur = () => {
setFirstRender(false);
(async () => {
@@ -244,9 +263,11 @@ function Form() {
setAmount(e.target.value)}
onBlur={handleBlur}
+ style={{ borderColor: getBorderColor('amount') }}
/>
RUB
@@ -282,10 +303,14 @@ function Form() {
БИК:
setBNFBankBic(e.target.value)}
onBlur={handleBlur}
- style={{ maxWidth: '32ch' }}
+ style={{
+ maxWidth: '32ch',
+ borderColor: getBorderColor('bnf_bank_bic'),
+ }}
/>
№ Корр. счета:
@@ -306,19 +331,27 @@ function Form() {
ИНН:
setBNFINN(e.target.value)}
onBlur={handleBlur}
- style={{ maxWidth: '32ch' }}
+ style={{
+ maxWidth: '32ch',
+ borderColor: getBorderColor('bnf_inn'),
+ }}
/>
КПП (103):
setBNFKPP(e.target.value)}
onBlur={handleBlur}
- style={{ maxWidth: '32ch' }}
+ style={{
+ maxWidth: '32ch',
+ borderColor: getBorderColor('bnf_kpp'),
+ }}
/>
@@ -326,10 +359,14 @@ function Form() {
Наименование:
setBNFName(e.target.value)}
onBlur={handleBlur}
- style={{ width: '100ch' }}
+ style={{
+ width: '100ch',
+ borderColor: getBorderColor('bnf_name'),
+ }}
/>
Банк получателя:
@@ -337,12 +374,14 @@ function Form() {
Назначение платежа:
@@ -378,7 +417,7 @@ function Form() {
{Object.keys(messages)?.filter((item) => messages[item]?.status != 'OK')
.length > 0 ? (
-
+
) : null}
diff --git a/src/Messages.jsx b/src/Messages.jsx
index 7d42219..2dc5bce 100644
--- a/src/Messages.jsx
+++ b/src/Messages.jsx
@@ -6,6 +6,7 @@ function Messages(props) {
?.filter((item) => props.messages[item]?.status !== 'OK')
.map((item, ind) => (
props.focusField(item)}
key={`messages_${ind}`}
style={{
backgroundColor:
@@ -13,6 +14,7 @@ function Messages(props) {
width: '500px',
padding: '5px',
border: 'solid 1px',
+ cursor: 'pointer',
}}
>
![]()