Implement validating the form.

src/Form.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import './Form.css';
 
 function App() {
+  const [firstRender, setFirstRender] = useState(true);
   const [payerName, setPayerName] = useState('');
   const [payerINN, setPayerINN] = useState('');
   const [payerPhoneEmail, setPayerPhoneEmail] = useState('');
@@ -23,35 +24,126 @@ function App() {
   const [taxUINCode, setTaxUINCode] = useState('');
 
   const fields = [
-    { name: 'payer_name', value: payerName },
+    {
-    { name: 'client_id', value: clientId },
+      name: 'payer_name',
-    { name: 'payer_inn', value: payerINN },
+      value: payerName,
-    { name: 'payer_phone_email', value: payerPhoneEmail },
+      status: 'OK',
-    { name: 'payer_address', value: payerAddress },
+      message: '',
-    { name: 'amount', value: amount },
+      values: [],
-    { name: 'payer_account', value: payerAccount },
+    },
-    { name: 'details_of_charges', value: chargesDetails },
+    {
-    { name: 'bnf_account', value: bnfAccount },
+      name: 'client_id',
-    { name: 'bnf_bank_bic', value: bnfBankBic },
+      value: clientId,
-    { name: 'bnf_inn', value: bnfINN },
+      status: 'OK',
-    { name: 'bnf_kpp', value: bnfKPP },
+      message: '',
-    { name: 'bnf_name', value: bnfName },
+      values: [],
-    { name: 'bnf_bank_name', value: bnfBankName },
+    },
-    { name: 'payment_details', value: paymentDetails },
+    {
-    { name: 'code_purpose', value: codePurpose },
+      name: 'payer_inn',
-    { name: 'tax_uin_code', value: taxUINCode },
+      value: payerINN,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'payer_phone_email',
+      value: payerPhoneEmail,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'payer_address',
+      value: payerAddress,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    { name: 'amount', value: amount, status: 'OK', message: '', values: [] },
+    {
+      name: 'payer_account',
+      value: payerAccount?.split('|')[0],
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'details_of_charges',
+      value: chargesDetails,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'bnf_account',
+      value: bnfAccount,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'bnf_bank_bic',
+      value: bnfBankBic,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    { name: 'bnf_inn', value: bnfINN, status: 'OK', message: '', values: [] },
+    { name: 'bnf_kpp', value: bnfKPP, status: 'OK', message: '', values: [] },
+    { name: 'bnf_name', value: bnfName, status: 'OK', message: '', values: [] },
+    {
+      name: 'bnf_bank_name',
+      value: bnfBankName,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'payment_details',
+      value: paymentDetails,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'code_purpose',
+      value: codePurpose,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'tax_uin_code',
+      value: taxUINCode,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'form_type',
+      value: 'EXT-RUB',
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'payment_type',
+      values: [],
+      value: 'regular_payment',
+      status: 'OK',
+      message: null,
+    },
   ];
 
   const handleBlur = () => {
-    console.log(fields);
+    setFirstRender(false);
+    (async () => {
+      const data = await requestPMTValidationAsyncAwait(fields, 'validate');
+      console.log(data);
+    })();
   };
 
-  useEffect(() => {
+  const requestPMTValidationAsyncAwait = async (fields, action) => {
-    const URLParams = new URLSearchParams(window.location.search);
-    const cnum = URLParams.get('cnum');
-    const ftype = URLParams.get('type');
-
-    const fetchUsingAsyncAwaitWithFetchApi = async () => {
     const response = await fetch('/pmtvalidation/validate/', {
       method: 'POST',
       headers: {
@@ -59,15 +151,34 @@ function App() {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-          fields: [
+        fields: fields,
+        action: action,
+      }),
+    });
+    const data = await response.json();
+    return data;
+  };
+
+  useEffect(() => {
+    if (!firstRender) {
+      handleBlur();
+    }
+  }, [firstRender, handleBlur, chargesDetails, codePurpose, payerAccount]);
+
+  useEffect(() => {
+    const URLParams = new URLSearchParams(window.location.search);
+    const cnum = URLParams.get('cnum');
+    const ftype = URLParams.get('type');
+
+    (async () => {
+      const data = await requestPMTValidationAsyncAwait(
+        [
           { name: 'payer_account' },
           { name: 'client_id', value: cnum },
           { name: 'form_type', value: ftype },
         ],
-          action: 'getClientInfo',
+        'getClientInfo'
-        }),
+      );
-      });
-      const data = await response.json();
       setPayerName(data.fields[3].value);
       setPayerINN(data.fields[4].value);
       setPayerPhoneEmail(data.fields[6].value);
@@ -75,9 +186,8 @@ function App() {
       setClientId(data.fields[1].value);
       setPayerBankAccount(data.fields[12].value);
       setPayerAccounts(data.accounts);
-    };
+      setPayerAccount(data.accounts[0]?.cbAccountNumber);
-
+    })();
-    fetchUsingAsyncAwaitWithFetchApi();
   }, []);
 
   return (
@@ -102,7 +212,7 @@ function App() {
             <select
               value={payerAccount}
               onChange={(e) => setPayerAccount(e.target.value)}
-              onBlur={handleBlur}
+              onClick={() => setFirstRender(false)}
             >
               {payerAccounts.map((item, ind) => (
                 <option key={`cbAccountNumber_${ind}`}>
@@ -137,6 +247,7 @@ function App() {
             <select
               value={chargesDetails}
               onChange={(e) => setChargesDetails(e.target.value)}
+              onClick={() => setFirstRender(false)}
             >
               <option>BEN</option>
               <option>OUR</option>
@@ -224,6 +335,7 @@ function App() {
               style={{ width: '102ch' }}
               value={codePurpose}
               onChange={(e) => setCodePurpose(e.target.value)}
+              onClick={() => setFirstRender(false)}
             >
               <option>1</option>
               <option>2</option>