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,51 +24,161 @@ function App() {
   const [taxUINCode, setTaxUINCode] = useState('');
 
   const fields = [
-    { name: 'payer_name', value: payerName },
-    { name: 'client_id', value: clientId },
-    { name: 'payer_inn', value: payerINN },
-    { name: 'payer_phone_email', value: payerPhoneEmail },
-    { name: 'payer_address', value: payerAddress },
-    { name: 'amount', value: amount },
-    { name: 'payer_account', value: payerAccount },
-    { name: 'details_of_charges', value: chargesDetails },
-    { name: 'bnf_account', value: bnfAccount },
-    { name: 'bnf_bank_bic', value: bnfBankBic },
-    { name: 'bnf_inn', value: bnfINN },
-    { name: 'bnf_kpp', value: bnfKPP },
-    { name: 'bnf_name', value: bnfName },
-    { name: 'bnf_bank_name', value: bnfBankName },
-    { name: 'payment_details', value: paymentDetails },
-    { name: 'code_purpose', value: codePurpose },
-    { name: 'tax_uin_code', value: taxUINCode },
+    {
+      name: 'payer_name',
+      value: payerName,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'client_id',
+      value: clientId,
+      status: 'OK',
+      message: '',
+      values: [],
+    },
+    {
+      name: 'payer_inn',
+      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);
+    })();
   };
 
+  const requestPMTValidationAsyncAwait = async (fields, action) => {
+    const response = await fetch('/pmtvalidation/validate/', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        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');
 
-    const fetchUsingAsyncAwaitWithFetchApi = async () => {
-      const response = await fetch('/pmtvalidation/validate/', {
-        method: 'POST',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          fields: [
-            { name: 'payer_account' },
-            { name: 'client_id', value: cnum },
-            { name: 'form_type', value: ftype },
-          ],
-          action: 'getClientInfo',
-        }),
-      });
-      const data = await response.json();
+    (async () => {
+      const data = await requestPMTValidationAsyncAwait(
+        [
+          { name: 'payer_account' },
+          { name: 'client_id', value: cnum },
+          { name: 'form_type', value: ftype },
+        ],
+        'getClientInfo'
+      );
       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);
-    };
-
-    fetchUsingAsyncAwaitWithFetchApi();
+      setPayerAccount(data.accounts[0]?.cbAccountNumber);
+    })();
   }, []);
 
   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>